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

Jai Krishnan

Wan-Teh Chang

Jeremy Wagner

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

AVIF एक इमेज फ़ॉर्मैट है, जो AV1 वीडियो कोडेक पर आधारित है. इसे Alliance for Open Media के हिसाब से तय किया गया है. AVIF, JPEG और WebP जैसे अन्य इमेज फ़ॉर्मैट की तुलना में, फ़ाइलों को कंप्रेस करने की बेहतर सुविधा देता है. हालांकि, यह बचत कॉन्टेंट, कोड में बदलने के तरीके की सेटिंग, और क्वालिटी टारगेट पर निर्भर करती है. फिर भी, हमने और अन्य जेपीईजी के मुकाबले 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, एक ओपन सोर्स AVIF मक्सर और पार्सर है. यह AVIF इमेज को डिकोड करने के लिए, Chrome में इस्तेमाल किया जाता है. इसका इस्तेमाल आपकी मौजूदा बिना कंप्रेस की गई इमेज से AVIF इमेज बनाने या मौजूदा वेब इमेज (JPEG, PNG वगैरह) से ट्रांसकोडिंग करने के लिए libaom के साथ भी इस्तेमाल किया जा सकता है.

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

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

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

हालांकि, WebAssembly के पास अभी सीपीयू के सभी परफ़ॉर्मेंस प्रिमिटिव का ऐक्सेस नहीं है. इसलिए, अगर आपको 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

बिल्डिंग कमांड लाइन एन्कोडर एविफ़ेन्क

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 का सोर्स कोड दिखाएगा और 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 ..

एविफ़ेन्क बनाएं.

make

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

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

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

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

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

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 इमेज को बनाते समय avifenc को 8 थ्रेड का इस्तेमाल करने का निर्देश दिया गया है, जिससे एवीएफ़ कोड में बदलने की स्पीड करीब पांच गुना बढ़ जाती है.

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

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

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

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

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

नतीजा

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