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

Jai Krishnan

Wan-Teh Chang

Jeremy Wagner

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

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

1120 x 840 पिक्सल का AVIF फ़ॉर्मैट, जिसका साइज़ 18,769 बाइट है (बड़ा करने के लिए क्लिक करें)

1120 x 840 पिक्सल का JPEG फ़ॉर्मैट, जिसका साइज़ 20,036 बाइट है (बड़ा करने के लिए क्लिक करें)

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

ध्यान दें: AVIF में, प्रगतिशील डिकोडिंग की दो तरह की सुविधाएं काम करती हैं. स्पेस स्केलेबिलिटी का इस्तेमाल, नेटवर्क की समस्या वाले उपयोगकर्ताओं को कम रिज़ॉल्यूशन वाली इमेज दिखाने के लिए किया जा सकता है. साथ ही, ज़्यादा फ़्रीक्वेंसी वाली जानकारी भरने के लिए ज़रूरी अतिरिक्त डेटा भेजकर, 'धीरे-धीरे' ज़्यादा रिज़ॉल्यूशन वाली इमेज दी जा सकती है. क्वालिटी स्केलेबल करने की सुविधा से भी इसी तरह की प्रोग्रेस मिलती है. इसमें हर रेंडर के साथ विज़ुअल क्वालिटी लगातार बेहतर होती जाती है.

नया क्या है

Chrome M85 में AVIF के साथ काम करने की वजह से, ओपन सोर्स नेटवर्क में AVIF काम करने की कई सुविधाओं में सुधार हुआ है.

Libaom

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

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

8.1 एमपी वाली इमेज के लिए, speed=6, cq-level=18 का इस्तेमाल करना

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

Libavif

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

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

ध्यान दें: libheif एक और लोकप्रिय ओपन सोर्स AVIF म्यूक्सर और पार्सर है. इसका इस्तेमाल, ImageMagick, libvips, और sharp Node.js मॉड्यूल में किया जाता है.

avifenc की मदद से AVIF इमेज को एन्कोड करना

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

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

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

• Chrome का वर्शन 85 या इसके बाद का वर्शन
• cmake
• git
• ninja

आपको 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 पर जाएं. हम avifenc बना रहे हैं, ताकि इसे libaom, AV1 एन्कोडर और डिकोडर लाइब्रेरी से स्टैटिक तौर पर लिंक किया जा सके.

3. libaom को डाउनलोड और बिल्ड करना

libavif की बाहरी डिपेंडेंसी डायरेक्ट्री पर जाएं.

cd ext

अगला निर्देश, libaom का सोर्स कोड दिखाएगा और libaom को स्टैटिक तरीके से बनाएगा.

./aom.cmd

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

cd ..

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

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 ..

avifenc बनाएं.

make

आपने avifenc बना लिया है!

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

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

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

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

एविफ़ेन्क
--min 0	कलर के लिए, कम से कम क्वांटिज़र को 0 पर सेट करें
--max 63	कलर के लिए ज़्यादा से ज़्यादा क्वांटिज़र को 63 पर सेट करें
--minalpha 0	अल्फा के लिए, कम से कम क्वांटिज़र को 0 पर सेट करें
--maxalpha 63	अल्फा के लिए ज़्यादा से ज़्यादा क्वांटिज़र को 63 पर सेट करें
-a end-usage=q	रेट कंट्रोल मोड को कॉन्स्टेंट क्वालिटी (Q) मोड पर सेट करना
-a cq-level=Q	कलर और अल्फा, दोनों के लिए क्वांटाइज़ लेवल को Q पर सेट करें
-एक color:cq-level=Q	कलर के लिए, क्वांटाइज़ लेवल को Q पर सेट करना
-a alpha:cq-level=Q	अल्फा के लिए क्वांटाइज़ लेवल को Q पर सेट करना
-a tune=ssim	SSIM के लिए ट्यून करें (डिफ़ॉल्ट रूप से, PSNR के लिए ट्यून किया जाता है)
--jobs J	J वर्कर थ्रेड का इस्तेमाल करें (डिफ़ॉल्ट: 1)
--speed S	एन्कोडर की स्पीड को 0 से 10 पर सेट करें (सबसे धीमा से सबसे तेज़. डिफ़ॉल्ट: 6)

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

ध्यान दें: cq-लेवल को क्वांटिज़ेशन की "मात्रा" के तौर पर देखा जा सकता है. इसलिए, कम वैल्यू से बेहतर क्वालिटी मिलती है

ध्यान दें: ज़्यादा स्पीड की सेटिंग तेज़ी से चलेगी, लेकिन इससे कॉम्प्रेस करने की परफ़ॉर्मेंस और क्वालिटी खराब होगी. इस ट्यूटोरियल में, स्पीड 6 की डिफ़ॉल्ट सेटिंग का इस्तेमाल किया गया है. हमारा सुझाव है कि एन्कोड करने की स्पीड, कंप्रेस करने की क्षमता, और क्वालिटी के बीच संतुलन बनाने के लिए, इस सेटिंग का इस्तेमाल करें.

डिफ़ॉल्ट सेटिंग के साथ 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

ध्यान दें: AVIF इमेज के लिए, "--min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim" सेटिंग इस्तेमाल करने का सुझाव दिया जाता है. अगर इमेज में कोई अल्फा चैनल है, तो "--minalpha 0 --maxalpha 63" जोड़ें. रंग और अल्फा के लिए अलग-अलग क्वांटाइज़ लेवल तय करने के लिए, "-a cq-level=18" को "-a color:cq-level=18 -a alpha:cq-level=10" से बदलें.

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

इससे avifenc को AVIF इमेज बनाते समय आठ थ्रेड का इस्तेमाल करने का निर्देश मिलता है. इससे AVIF को कोड में बदलने की प्रोसेस में करीब पांच गुना की तेज़ी आती है.

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर असर

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

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

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

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

नतीजा

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