ज़्यादा रिस्पॉन्सिव वेबसाइटों के लिए AVIF को डिप्लॉय करना

इकोसिस्टम में AVIF को अपनाने के तरीके के बारे में अपडेट.

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

AVIF एक नया इमेज फ़ॉर्मैट है. यह वेब पर तेज़ी से लोकप्रिय हो रहा है. इसकी वजह यह है कि यह इमेज को ज़्यादा कंप्रेस करता है, बेहतर परफ़ॉर्म करता है, और इसे ज़्यादा से ज़्यादा लोग इस्तेमाल कर रहे हैं. AVIF, एक ओपन और रॉयल्टी-फ़्री इमेज फ़ॉर्मैट है. यह फ़ॉर्मैट, AV1 वीडियो कोडेक पर आधारित है. इसे Alliance for Open Media ने स्टैंडर्ड के तौर पर तय किया है. इस ब्लॉग पोस्ट में आपको यह जानकारी दी गई है कि नेटवर्क में AVIF को कैसे अपनाया जाता है. साथ ही, यह भी बताया जाएगा कि स्टिल इमेज और ऐनिमेशन के लिए, डेवलपर AVIF से किस तरह की परफ़ॉर्मेंस और क्वालिटी से जुड़े फ़ायदे पा सकते हैं.

Chrome, Firefox, और Safari में AVIF का इस्तेमाल शुरू होने के बाद से, वेब पर AVIF का इस्तेमाल लगातार बढ़ रहा है. फ़िलहाल, लगभग सभी ब्राउज़र AVIF के साथ काम करते हैं.

Chrome में AVIF का इस्तेमाल, एक साल से ज़्यादा समय में करीब एक प्रतिशत तक बढ़ गया. ऐसा तब हुआ, जब Chrome ने AVIF का इस्तेमाल करने की सुविधा को स्टैबल वर्शन में जोड़ा.

मई 2021 से मार्च 2023 तक, Chrome में AVIF के इस्तेमाल का लाइन ग्राफ़. सहायता पाने वाले लोगों की संख्या 0% से बढ़कर 1.4% के आस-पास पहुंच गई है.

फ़िलहाल, Akamai, Cloudflare, Cloudinary, और Imgix जैसे कई इमेज सीडीएन, AVIF इमेज का इस्तेमाल कर रहे हैं. AVIF फ़ॉर्मैट के साथ काम करने की सुविधा का एलान करने वाली ब्लॉग पोस्ट में, Imgix ने बताया कि JPEG की तुलना में फ़ाइल का साइज़ 60% और WebP की तुलना में 35% कम हो जाता है. फ़ाइल के साइज़ में होने वाली इस बचत से डिवाइस के स्टोरेज में काफ़ी बचत होती है. हालांकि, इससे पेज तेज़ी से लोड होते हैं, जिससे सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) कम होता है. एलसीपी, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में से एक है. इससे पता चलता है कि पेज पर सबसे बड़े कॉन्टेंट ब्लॉक को लोड होने में कितना समय लगा. इमेज को कंप्रेस करने के लिए आधुनिक कोडेक का इस्तेमाल करना, एलसीपी को कम करने की मुख्य तकनीकों में से एक है. Lighthouse, Chrome डेवलपर टूल है. इसकी मदद से, अपनी वेबसाइट की जांच की जा सकती है. साथ ही, यह भी देखा जा सकता है कि AVIF का इस्तेमाल करने से कितनी बचत होगी.

WordPress, दुनिया का सबसे लोकप्रिय वेबसाइट प्लैटफ़ॉर्म है. डेवलपर के पास अपनी इमेज को AVIF में बदलने के लिए, कई प्लगिन उपलब्ध हैं. जैसे:

ज़्यादा काम करने वाले डेवलपर के लिए, ImageMagick और FFmpeg जैसे टूल से शुरुआत करना अच्छा रहेगा.

AVIF फ़ॉर्मैट में वीडियो को एन्कोड करने की स्पीड

बड़े पैमाने पर इमेज कंप्रेस करने की सुविधा को लागू करने के लिए, कोड में बदलने की तेज़ स्पीड और विज़ुअल क्वालिटी बहुत ज़रूरी है. पिछले दो सालों में, AVIF सॉफ़्टवेयर की एन्कोडिंग स्पीड काफ़ी बेहतर हुई है. अन्य मॉडर्न स्टिल इमेज फ़ॉर्मैट की तुलना में, AVIF मिलती-जुलती विज़ुअल क्वालिटी वाली छोटी फ़ाइलें बनाता है. नीचे दिया गया ग्राफ़ देखें, जितना कि कम बेहतर है, लेकिन एन्कोड करने में तेज़ी भी आती है.

TurboJPEG के आउटपुट के प्रतिशत के तौर पर, अलग-अलग इमेज कोडेक फ़ाइल साइज़ की तुलना करने वाला बार चार्ट. AVIF सबसे कम, उसके बाद JPEG XL, फिर WebP, और आखिर में MozJPEG.

नीचे दिया गया चार्ट (ज़्यादा यह बेहतर होता है) दिखाता है कि अन्य इमेज फ़ॉर्मैट की तुलना में AVIF एन्कोडिंग स्पीड कैसी है. WebP जैसे पिछली जनरेशन के कोडेक, कम मुश्किल (लेकिन कम असरदार) कंप्रेशन एल्गोरिदम का फ़ायदा लेते हैं. मल्टी-थ्रेड वाली कोडिंग स्कीम की मदद से, AVIF सामान्य इस्तेमाल के उदाहरणों के लिए, JPEG जैसी ही परफ़ॉर्मेंस देता है. साथ ही, यह कॉम्प्रेस करने की सुविधा को बेहतर बनाता है.

इमेज कोडेक की एन्कोडिंग स्पीड की तुलना. तुलना में शामिल एन्कोडर, औसत AVIF, औसत JPEG XL, औसत WebP (एक थ्रेड), और औसत MozJPEG (एक थ्रेड) हैं. आम तौर पर, AVIF सबसे अच्छी क्वालिटी और डिफ़ॉल्ट तरीके से इमेज को तेज़ी से एन्कोड करने वाला फ़ॉर्मैट है. हालांकि, यह फ़ॉर्मैट, फ़्लाइट के दौरान इमेज को एन्कोड करने में सभी फ़ॉर्मैट से धीमा है.

एन्कोडिंग की स्पीड और विज़ुअल क्वालिटी की तुलना के बारे में ज़्यादा जानने के लिए, डेवलपर इमेज कोडिंग की तुलना वाली साइट पर जाएं. यहां बेंचमार्क के नतीजे देखे जा सकते हैं.

AVIF और WebP जैसे आधुनिक इमेज कोडेक के लिए सॉफ़्टवेयर को x86 और ARM प्रोसेसर आर्किटेक्चर के लिए ऑप्टिमाइज़ किया गया है. हालांकि, बड़े पैमाने पर कई इमेज को कंप्रेस करने के लिए, कंप्यूटर पर ज़्यादा काम करना पड़ सकता है. वीडियो को कम साइज़ में बदलने की लागत कम करने के लिए, हार्डवेयर से तेज़ी लाएं सुविधा का इस्तेमाल करें. Bluedot ने प्रोग्राम करने लायक FPGA पर चलने वाले हार्डवेयर ऐक्सेलरेटेड पल्सर-AVIF एन्कोडर को डेवलप किया है. जैसे, AMD का Alveo U250. सॉफ़्टवेयर पर आधारित एविफ़ेन्क की तुलना में, Pulसर-AVIF, कंप्रेशन क्षमता के समान एक जैसी गति से गति में 7 से 23 गुना सुधार करता है.

एन्कोडर वीडियो को एन्कोड करने में लगने वाला समय (मिलीसेकंड) फ़्रेम प्रति सेकंड सीपीयू (CPU) का इस्तेमाल हार्डवेयर की जानकारी
पल्सर-वीवीएफ़
(FPGA)
60 409.85 305% AMD Alveo U250 1ea + Intel(R) Xeon(R)
2.6 गीगाहर्ट्ज़, 10 कोर वाला प्लैटिनम 8171 सीपीयू
avifenc
(libaom)
405 59.26 3200% Intel(R) Xeon(R) Platinum 8370C सीपीयू,
2.8GHz, 32 कोर
avifenc
(SVT-AV1)
1325 18.11 3200%
2.8 गीगाहर्ट्ज़, 32 कोर वाला Intel(R) Xeon(R) प्लैटिनम 8370C सीपीयू
AVIF फ़ॉर्मैट में वीडियो कोड में बदलने की स्पीड की तुलना
  • टेस्ट सेट: Kodak (768x512 की 24 इमेज)
  • एक साथ 24 इमेज को एन्कोड करना (24 प्रोसेस)
  • सॉफ़्टवेयर को कोड में बदलने की हर प्रोसेस, चार थ्रेड की मदद से चलती है. (-j 4)


डेवलपर, Azure NP-Series जैसी क्लाउड वर्चुअल मशीनों के साथ PulSAR-AVIF एन्कोडर को डिप्लॉय कर सकते हैं.

रिस्पॉन्सिव वेब पेजों के लिए AVIF की सुविधाएं

AVIF में कुछ दिलचस्प सुविधाएं हैं, जो ज़्यादा रिस्पॉन्सिव वेब पेजों को डिलीवर करने में मदद करेंगी. इस बार हम ऐनिमेटेड AVIF के बारे में थोड़ा जानेंगे. ये वेब पर शानदार ऐनिमेशन बनाने का अब तक का सबसे बेहतर तरीका है.

ऐनिमेट किया गया AVIF

ऐनिमेशन वाला GIF 35 साल का होने के बावजूद भी, ऐनिमेशन वाली इमेज के लिए एक लोकप्रिय फ़ॉर्मैट है. ऐनिमेशन वाले GIF की सबसे बड़ी कमी यह है कि वे सिर्फ़ 256 रंगों में काम कर सकते हैं और उनके खराब कंप्रेस होने की वजह से फ़ाइल का साइज़ बहुत बड़ा हो जाता है. साथ ही, इस्तेमाल के लिए रिज़ॉल्यूशन या फ़्रेम रेट भी सीमित हो जाता है. इसके उलट, ऐनिमेटेड AVIF कोडिंग असल में AV1 वीडियो कोडिंग स्कीम की तरह है, जो ऐनिमेटेड GIF की तुलना में फ़ाइल साइज़ की बचत करती है.

हमने एक आसान बेंचमार्क चलाया, जिसमें हमने ऐनिमेटेड GIF के एक सेट को AVIF और JPEG XL, दोनों में एन्कोड किया. टेस्ट सेट में, ओरिजनल GIF फ़ाइलों की तुलना में फ़ाइल के साइज़ में औसतन 86% की बचत हुई. वहीं, ऐनिमेशन वाली JPEG XL फ़ाइलों की तुलना में फ़ाइल के साइज़ में औसतन 73% की बचत हुई*.

ऐनिमेशन वाली इमेज कोडेक की परफ़ॉर्मेंस की तुलना. फ़ाइल के औसत और मीडियन साइज़ के मामले में, AVIF, GIF और JPEG XL से बेहतर परफ़ॉर्म करता है.
* libavif और libjxl वर्शन: libavif वर्शन 4cff6a3 (libaom वर्शन v3.5.0), libjxl वर्शन 176b1c03. टेस्ट सेट: Wikipedia से 15 सैंपल GIF.

Chrome, Firefox, और Safari, ऐनिमेशन वाले AVIF फ़ॉर्मैट में वीडियो चलाने की सुविधा देते हैं.

ऐनिमेशन वाली AVIF फ़ाइलें बनाने के लिए, FFmpeg एक टूल है. यहां FFmpeg का इस्तेमाल करके, GIF को AVIF में बदलने का एक बुनियादी उदाहरण दिया गया है:

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

0 से 63 के पैमाने पर $CRF मनचाही आउटपुट क्वालिटी है. कम वैल्यू का मतलब है बेहतर क्वालिटी और ज़्यादा फ़ाइल साइज़. 0, बिना किसी डेटा को हटाए कंप्रेस करने की सुविधा का इस्तेमाल करता है. ऐनिमेशन वाली छोटी AVIF फ़ाइलों के लिए, 23 की वैल्यू से शुरू करें.

FFmpeg, AVIF इमेज को एन्कोड करने के लिए डिफ़ॉल्ट रूप से libaom का इस्तेमाल करता है. हालांकि, उपलब्ध होने पर यह rav1e या SVT-AV1 का भी इस्तेमाल कर सकता है. FFmpeg की AV1 एन्कोडिंग गाइड में, एन्कोडर के विकल्पों के बारे में ज़्यादा जानकारी मिल सकती है. साथ ही, इसमें क्वालिटी और स्पीड के बीच समझौता करने के लिए, एन्कोडिंग पैरामीटर को ट्यून करने के बारे में भी बताया गया है.

इस्तेमाल का एक और उदाहरण, ओरिजनल फ़ाइल को फिर से एन्कोड किए बिना, AV1 वीडियो को AVIF में फिर से पैकेज करना है. यह ओरिजनल AV1 फ़ाइल को डिकोड/कोड करने की तुलना में काफ़ी सस्ता है. साथ ही, इससे AV1 वीडियो को <img> एलिमेंट के साथ इस्तेमाल करने के लिए उपलब्ध कराया जाता है. FFmpeg को -c:v copy पास करके ऐसा किया जा सकता है.

ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"

मीटिंग में सामने आए नतीजे

लॉन्च होने के बाद से, वेब पर AVIF का इस्तेमाल लगातार बढ़ रहा है. यह ब्राउज़र, इमेज सीडीएन, WordPress प्लग इन, और कोड में बदलने वाले टूल के साथ काम करता है. कुल मिलाकर, वेब पर इमेज दिखाने के लिए AVIF एक बेहतरीन विकल्प है. AVIF को तेज़ी से एन्कोड और डिकोड किया जा सकता है. साथ ही, यह सबसे अच्छी क्वालिटी या सबसे छोटा फ़ाइल साइज़ उपलब्ध कराता है. यह आपकी वेबसाइट के हिसाब से तय किया जा सकता है कि आपको कौनसी क्वालिटी चाहिए. AVIF, वेब पर ऐनिमेशन भेजने का सबसे बेहतर तरीका है. अगर आपके पास कोई सवाल, टिप्पणी या सुविधा का अनुरोध है, तो कृपया av1-discuss मेलिंग सूची, AOM GitHub कम्यूनिटी, और AVIF wiki पर संपर्क करें.

Unsplash से ली गई हीरो इमेज, जिसे अमल एस ने बनाया है.