AVIF का इस्तेमाल करके अपनी साइट पर इमेज कंप्रेस करना

जय कृष्णन

वान-ते चैंग

जेरेमी वैगनर

हम वेबसाइटों पर इमेज और Lighthouse जैसे टूल की वजह से होने वाले उल्लंघन के बारे में अक्सर लिखते हैं. ये ऐसे टूल होते हैं जिनकी वजह से उपयोगकर्ता अनुभव पर बुरा असर पड़ सकता है. जैसे, कॉन्टेंट लोड होने में लगने वाला समय बढ़ाना या ज़्यादा ज़रूरी संसाधनों से बैंडविथ को कम रखना. इसे ठीक करने का एक तरीका यह है कि इमेज के फ़ाइल साइज़ को कम करने के लिए मॉडर्न कंप्रेशन का इस्तेमाल किया जाए. वेब डेवलपर के लिए, AVIF इमेज फ़ॉर्मैट का इस्तेमाल करना एक नया विकल्प है. यह ब्लॉग पोस्ट AVIF के लिए ओपन सोर्स टूलिंग के हाल के अपडेट के बारे में बात करती है, libaom और libavif एन्कोडिंग की लाइब्रेरी पेश करती है. साथ ही, इसमें AVIF इमेज को बेहतर तरीके से एन्कोड करने के लिए इन लाइब्रेरी का इस्तेमाल करने का ट्यूटोरियल शामिल है.

AVIF एक इमेज फ़ॉर्मैट है, जो AV1 वीडियो कोडेक पर आधारित है. यह Open Media के लिए Alliance से स्टैंडर्ड फ़ॉर्मैट में है. AVIF, JPEG और WebP जैसे अन्य इमेज फ़ॉर्मैट के मुकाबले ज़्यादा कंप्रेस करता है. हालांकि सटीक बचत कॉन्टेंट, एन्कोडिंग सेटिंग, और क्वालिटी टारगेट पर निर्भर करेगी, हम और अन्य लोगों ने JPEG के मुकाबले 50% से ज़्यादा की बचत की है.

AVIF, इमेज की नई सुविधाओं के लिए कोडेक और कंटेनर सहायता जोड़ता है, जैसे कि हाई डाइनैमिक रेंज और वाइड कलर गैमट, फ़िल्म ग्रेन सिंथेसिस, और प्रोग्रेसिव डिकोडिंग.

नया क्या है

Chrome M85 में AVIF की सुविधा लॉन्च होने के बाद से, ओपन सोर्स नेटवर्क में AVIF की सुविधा कई मोर्चे पर बेहतर हुई है.

लिबाओम

Libaom एक ओपन सोर्स AV1 एन्कोडर और डिकोडर है. इसे Alliance for Open Media की कंपनियां मैनेज करती हैं. इसका इस्तेमाल Google और अन्य सदस्य कंपनियों में कई प्रोडक्शन सेवाओं में किया जाता है. libaom 2.0.0 रिलीज़—जब Chrome ने AVIF की सुविधा जोड़ी है उस समय और हाल ही के 3.1.0 रिलीज़ के बीच, कोड बेस में इमेज को कोड में बदलने के अहम बदलाव जोड़े गए हैं. इनमें शामिल हैं:

• मल्टी-थ्रिंग और टाइल वाले तरीके से कोड में बदलने के तरीके के लिए ऑप्टिमाइज़ेशन.
• मेमोरी के इस्तेमाल में 5 गुना कमी.
• जैसा कि नीचे दिए गए चार्ट में दिखाया गया है, सीपीयू के इस्तेमाल में 6.5 गुना कमी आई है.

इन बदलावों से AVIF को कोड में बदलने का खर्च बहुत कम हो जाता है, खास तौर पर, आपकी साइट पर सबसे ज़्यादा लोड की जाने वाली या सबसे ज़्यादा प्राथमिकता वाली इमेज. जैसे-जैसे AV1 की हार्डवेयर से तेज़ी से कोड में बदलने की सुविधा, सर्वर और क्लाउड सेवाओं पर उपलब्ध होगी, वैसे-वैसे AVIF इमेज बनाने की लागत कम होती जाएगी.

लिबाविफ़

Libavif, एवीएफ़ का रेफ़रंस इंप्लिमेंटेशन है, यह एक ओपन सोर्स एवीएफ़ म्यूक्सर और पार्सर है. इसका इस्तेमाल Chrome में AVIF इमेज को डिकोड करने के लिए किया जाता है. इसका इस्तेमाल libaom के साथ आपकी मौजूदा बिना कंप्रेस की गई इमेज से AVIF इमेज बनाने या मौजूदा वेब इमेज (JPEG, PNG वगैरह) को ट्रांसकोड करने के लिए भी किया जा सकता है.

Libavif ने हाल ही में एन्कोडर की ज़्यादा सेटिंग के लिए सहायता जोड़ी है, जिसमें ज़्यादा बेहतर libaom एन्कोडर सेटिंग भी शामिल है. प्रोसेस करने की प्रोसेस में ऑप्टिमाइज़ेशन, जैसे कि libyav का इस्तेमाल करके YUV-से-RGB कन्वर्ज़न और पहले से मौजूद ऐल्फ़ा सपोर्ट की मदद से, डिकोड करने की प्रोसेस को तेज़ किया जाता है. आखिर में, libaom 3.1.0 में हाल ही में जोड़ा गया ऑल-इंट्रा एन्कोडिंग मोड के लिए काम करने से, ऊपर बताए गए सभी libaom सुधार लागू होते हैं.

avifenc के साथ AVIF इमेज को कोड में बदलना

AVIF के साथ प्रयोग करने का एक तेज़ तरीका Squoosh.app है. Squoosh, libavif का WebAssembly वर्शन चलाता है. साथ ही, कमांड-लाइन टूल जैसी कई सुविधाएं दिखाता है. यह AVIF की तुलना पुराने और नए अन्य फ़ॉर्मैट से करने का आसान तरीका है. Squoosh का एक सीएलआई वर्शन भी मौजूद है, जो Node ऐप्लिकेशन के लिए है.

हालांकि, WebAssembly के पास अभी तक CPU के सभी परफ़ॉर्मेंस प्रिमिटिव का ऐक्सेस नहीं है. इसलिए, अगर आपको libavif को सबसे तेज़ चलाना है, तो हम कमांड लाइन एन्कोडर, avifenc का सुझाव देते हैं.

AVIF इमेज को कोड में बदलने का तरीका समझने के लिए, हम ऊपर दिए गए उदाहरण में इस्तेमाल की गई उसी स्रोत इमेज का इस्तेमाल करके एक ट्यूटोरियल पेश करेंगे. शुरू करने के लिए, आपको इनकी ज़रूरत होगी:

• Chrome का 85 या उसके बाद वाला वर्शन
• cmake
• git
• निंजा

आपको zlib, libpng, और libjpeg के लिए डेवलपमेंट पैकेज भी इंस्टॉल करने होंगे. Debian और Ubuntu Linux डिस्ट्रिब्यूशन के लिए निर्देश:

sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev

बिल्डिंग कमांड लाइन एन्कोडर avifenc

1. कोड पाएं

libavif का रिलीज़ टैग देखें.

git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git

2. डायरेक्ट्री को libavif में बदलें

cd libavif

ऐसे कई अलग-अलग तरीके हैं जिन्हें बनाने के लिए avifenc और libavif को कॉन्फ़िगर किया जा सकता है. आपको libavif पर ज़्यादा जानकारी मिल सकती है. हम एवीफ़ेंक बनाने जा रहे हैं, ताकि वह स्टैटिक रूप से AV1 एन्कोडर और डिकोडर लाइब्रेरी, libaom से लिंक किया जा सके.

3. लिबाओम पाएं और बनाएं

libavif की बाहरी डिपेंडेंसी डायरेक्ट्री में बदलाव करें.

cd ext

अगला निर्देश libaom सोर्स कोड को लेगा और स्टैटिक रूप से बना देगा.

./aom.cmd

डायरेक्ट्री को libavif में बदलें.

cd ..

4. कमांड लाइन एन्कोडिंग टूल बनाएं, avifenc

एवीफ़ेंक के लिए बिल्ड डायरेक्ट्री बनाना अच्छा आइडिया है.

mkdir build

बिल्ड डायरेक्ट्री में बदलें.

cd build

avifenc के लिए बिल्ड फ़ाइलें बनाएं.

cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..

एवीफ़ेंक बनाएं.

make

आपने सफलतापूर्वक एविफ़ेंक बना लिया है!

avifenc कमांड लाइन पैरामीटर को समझना

avifenc कमांड-लाइन स्ट्रक्चर का इस्तेमाल करता है:

./avifenc [options] input.file output.avif

इस ट्यूटोरियल में, avifenk के लिए इस्तेमाल किए गए बुनियादी पैरामीटर ये हैं:

cq-लेवल का विकल्प, रंग या ऐल्फ़ा के लिए क्वालिटी कंट्रोल करने के लिए, माप का लेवल (0-63) सेट करता है.

डिफ़ॉल्ट सेटिंग वाली AVIF इमेज बनाना

avifenc चलाने के लिए सबसे बुनियादी पैरामीटर इनपुट और आउटपुट फ़ाइलें सेट कर रहे हैं.

./avifenc happy_dog.jpg happy_dog.avif

हम किसी इमेज को कोड में बदलने के लिए, नीचे दी गई कमांड लाइन इस्तेमाल करने का सुझाव देते हैं. जैसे, लेवल 18 को क्वांटाइज़ करें:

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif

Avifenc में ऐसे कई विकल्प हैं जिनसे क्वालिटी और स्पीड, दोनों पर असर पड़ेगा. अगर आपको विकल्प देखने और उनके बारे में ज़्यादा जानना है, तो बस ./avifenc चलाएं

अब आपके पास आपकी अपनी AVIF इमेज है!

एन्कोडर की रफ़्तार तेज़ करना

आपकी मशीन में कितने कोर हैं, इसके आधार पर --jobs पैरामीटर एक पैरामीटर है, जिसे बदला जा सकता है. यह पैरामीटर सेट करता है कि AVIF इमेज बनाने के लिए, avifenc कितने थ्रेड का इस्तेमाल करेगा. इसे कमांड लाइन पर चलाकर देखें.

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif

यह ऐविफ़ेंक को AVIF इमेज बनाते समय 8 थ्रेड इस्तेमाल करने के लिए कहता है, जिससे AVIF एन्कोडिंग को करीब पांच गुना तेज़ी से बढ़ाया जाता है.

सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर असर

सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) की मेट्रिक के लिए, इमेज को सामान्य तौर पर चुना जाता है. एलसीपी इमेज के लोड होने की स्पीड को बेहतर बनाने का एक सामान्य सुझाव यह है कि आप यह पक्का कर लें कि इमेज को ऑप्टिमाइज़ किया गया हो. किसी संसाधन के ट्रांसफ़र का साइज़ कम करने से, उसके संसाधन लोड होने में लगने वाला समय बेहतर हो रहा है. इमेज वाले एलसीपी उम्मीदवारों के साथ काम करते समय, टारगेट किए जाने वाले चार मुख्य चरणों में से एक यह चरण है.

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

• एन्कोडर से मिलने वाले विकल्पों के बारे में अच्छी तरह जान लें. AVIF की उपलब्ध एन्कोडिंग सुविधाओं के साथ प्रयोग करके, आपको इमेज की क्वालिटी बनाए रखने के लिए अतिरिक्त बचत मिल सकती है.
• AVIF, लॉसलेस और लॉसलेस, दोनों तरह के एन्कोडिंग उपलब्ध कराता है. इमेज के कॉन्टेंट के आधार पर, हो सकता है कि कोड में बदलने का एक टाइप, दूसरे से बेहतर परफ़ॉर्म करे. उदाहरण के लिए, आम तौर पर JPEG फ़ॉर्मैट में इस्तेमाल की जाने वाली तस्वीरें, गलत तरीके से कोड में बदलने का तरीका इस्तेमाल करती हैं. वहीं, सामान्य जानकारी वाली इमेज या लाइन आर्ट को आम तौर पर PNG के तौर पर दिखाने के लिए, लॉसलेस एन्कोडिंग सबसे बेहतर होती है.
• अगर imagemin के लिए कम्यूनिटी सपोर्ट के साथ बंडलर का इस्तेमाल किया जा रहा है, तो imagemin-avif पैकेज का इस्तेमाल करें, ताकि आपके बंडलर को AVIF इमेज के वैरिएंट मिल सकें.

एवीएफ़ के साथ प्रयोग करके, आप अपनी वेबसाइट के एलसीपी समय में सुधार महसूस कर सकते हैं. ऐसा उन मामलों में होगा जहां एलसीपी कैंडिडेट एक इमेज हो. एलसीपी को ऑप्टिमाइज़ करने के बारे में ज़्यादा जानकारी के लिए, एलसीपी को ऑप्टिमाइज़ करने से जुड़ी गाइड पढ़ें.

नतीजा

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