AVIF इमेज दिखाना

1. परिचय

किसी वेब पेज को लोड करने के लिए, औसतन जितने बाइट की ज़रूरत होती है उसका 60%से ज़्यादा हिस्सा इमेज का होता है. AVIF का इस्तेमाल करके, इमेज का साइज़ छोटा किया जा सकता है. इससे आपकी वेबसाइट तेज़ी से लोड हो सकती है.

AVIF क्या है?

AVIF, AV1 वीडियो बिटस्ट्रीम से मिला एक इमेज फ़ॉर्मैट है. AVIF को इमेज कंप्रेस करने के लिए बनाया गया था.

AVIF फ़ॉर्मैट क्यों इस्तेमाल करें?

AVIF इमेज, JPEG, PNG, GIF या WebP इमेज की तुलना में बहुत छोटी होती हैं. हालांकि, इनकी क्वालिटी JPEG, PNG, GIF या WebP इमेज के बराबर या उनसे बेहतर होती है.

आपको क्या सीखने को मिलेगा

• अपनी इमेज से AVIF इमेज बनाने का तरीका
• किसी वेब पेज पर AVIF इमेज रेंडर करने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

• कोई भी लोकप्रिय ब्राउज़र.
• टेक्स्ट एडिटर
• cmake
• git
• ninja
• इमेज. मैंने इस लिंक पर एक उदाहरण दिया है.
• FFmpeg

2. Squoosh की मदद से AVIF इमेज बनाना

Squoosh, इमेज को कंप्रेस करने वाला एक वेब ऐप्लिकेशन है. यह आपकी इमेज को AVIF इमेज में बदल सकता है.

1. Squoosh खोलें.
2. Squoosh पर कोई लोकल इमेज छोड़ें.

3. 'कंप्रेस करें' ड्रॉप-डाउन बॉक्स से AVIF चुनें.

इसके बाद, Squoosh आपकी इमेज को AVIF इमेज में कंप्रेस कर देगा. Squoosh से इमेज को कंप्रेस करने के बाद, आपको सबसे नीचे दाएं कोने में AVIF इमेज के कुछ आंकड़ों के साथ डाउनलोड बटन दिखेगा.

ओरिजनल सैंपल इमेज 3340 केबी की थी और कंप्रेस की गई इमेज 378 केबी की है. सैंपल इमेज को कंप्रेस करके, ओरिजनल इमेज से करीब 10 गुना छोटा कर दिया गया था!

4. AVIF इमेज डाउनलोड करना

'डाउनलोड करें' बटन पर क्लिक करें. इससे AVIF इमेज आपकी लोकल ड्राइव में सेव हो जाएगी.

AVIF इमेज देखने के लिए, उसे Chrome पर खींचकर छोड़ें.

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

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

avifenc, कमांड लाइन वाला एक ऐप्लिकेशन है. यह PNG और JPEG इमेज को AVIF इमेज में बदल सकता है. avifenc, libavif का इस्तेमाल करता है. यह एक ऐसी लाइब्रेरी है जो AVIF इमेज को डिकोड और एन्कोड कर सकती है. अगर आपके पास ऐसी कई इमेज हैं जिन्हें आपको AVIF में बदलना है, तो कमांड लाइन एन्कोडर, avifenc का इस्तेमाल करना एक अच्छा विकल्प हो सकता है.

Chrome, AVIF इमेज रेंडर करने के लिए libavif का इस्तेमाल करता है.

1. कोड पाएं.

git clone https://github.com/AOMediaCodec/libavif.git

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

cd libavif/

avifenc और libavif को बनाने के लिए, कॉन्फ़िगर करने के कई तरीके हैं. ज़्यादा जानकारी के लिए, libavif पर जाएं. हम avifenc को इस तरह से बनाएंगे कि यह libaom एन्कोडर, dav1d डिकोडर, और libyuv प्रोसेसिंग लाइब्रेरी से स्टैटिक तौर पर लिंक हो.

libyuv, कलर कन्वर्ज़न की परफ़ॉर्मेंस को बेहतर बनाने के लिए ज़रूरी है.

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

avifenc के लिए, बिल्ड डायरेक्ट्री बनाना एक अच्छा आइडिया है.

mkdir build

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

cd build

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

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

avifenc बनाएं.

make

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

4. avifenc की मदद से AVIF इमेज बनाना

1. डिफ़ॉल्ट सेटिंग का इस्तेमाल करके, AVIF इमेज बनाएं.

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

./avifenc happy_dog.jpg example.avif

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

2. AVIF एन्कोडिंग की क्वालिटी बदलना.

आम तौर पर, AVIF एन्कोडिंग में सिर्फ़ quality पैरामीटर को बदला जा सकता है. quality एक ऐसा पैरामीटर है जो कंप्रेस की गई इमेज की क्वालिटी को फ़ाइल के साइज़ के हिसाब से बदलता है. उदाहरण के लिए, अच्छी क्वालिटी वाली फ़ाइल (-q 90), कम क्वालिटी वाली फ़ाइल (-q 20) से काफ़ी बड़ी होगी. हालांकि, अच्छी क्वालिटी वाली फ़ाइल ज़्यादा बेहतर दिखेगी.

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

5. वेब पेज पर AVIF इमेज रेंडर करना.

अब दुनिया को दिखाएं कि आपने कितनी मेहनत की है.

1. AVIF इमेज दिखाने के लिए, एक वेब पेज बनाएं.

avif_example.html नाम की फ़ाइल बनाएं.

अपने टेक्स्ट एडिटर में avif_example.html खोलें और यह कोड टाइप करें:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif">
      <img src="happy_dog.jpg">
    </picture>
  </body>
</html>

अपनी सोर्स फ़ाइल (मेरे मामले में happy_dog.jpg) और AVIF फ़ाइल (example.avif) को avif_example.html के साथ एक ही डायरेक्ट्री में कॉपी करें.

अगर ब्राउज़र AVIF फ़ॉर्मैट के साथ काम करता है, तो हम AVIF इमेज को रेंडर करने के लिए picture एलिमेंट का इस्तेमाल करते हैं. अगर ब्राउज़र AVIF फ़ॉर्मैट के साथ काम नहीं करता है, तो हम JPEG फ़ॉर्मैट का इस्तेमाल करते हैं. picture एलिमेंट के बारे में ज़्यादा जानें.

2. वेब पेज को Chrome में खोलें.

एचटीएमएल फ़ाइल खोलने का एक तरीका यह है कि avif_example.html को Chrome में खींचें. एचटीएमएल फ़ाइल खोलने का दूसरा तरीका यह है कि एचटीटीपी सर्वर से avif_example.html दिखाया जाए.

अब आपकी AVIF इमेज, Chrome में रेंडर होनी चाहिए. इसकी जांच करने के लिए, इमेज पर राइट क्लिक करें और Save image as... को चुनें. इससे example.avif वाला डायलॉग बॉक्स खुल जाएगा. दूसरा विकल्प यह है कि Chrome डेवलपर टूल खोलें और देखें कि example.avif डाउनलोड हो गया है.

6. FFmpeg की मदद से, ऐनिमेशन वाली AVIF इमेज बनाना

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

अगर आपके पास कोई सोर्स मीडिया फ़ाइल नहीं है, तो हमने आपके लिए एक y4m फ़ाइल बनाई है: ice_qcif_15fps.y4m. यह फ़ाइल Xiph.org Video Test Media से ली गई है.

Y4m फ़ाइलों को कंप्रेस नहीं किया जाता है. इसलिए, इनका साइज़ बहुत बड़ा हो सकता है.

1. ऐनिमेटेड AVIF इमेज बनाएं.

y4m फ़ाइल से ऐनिमेटेड AVIF इमेज बनाने के लिए, यह कमांड चलाएं.

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

2. वेब पेज पर ऐनिमेट की गई AVIF इमेज रेंडर करें.

avif_animated_example.html नाम की फ़ाइल बनाएं.

अगर आपके पास कोई सोर्स मीडिया फ़ाइल नहीं है, तो यहां दी गई gif फ़ाइल का इस्तेमाल करें: ice_qcif_15fps.gif.

अपने टेक्स्ट एडिटर में avif_animated_example.html खोलें और यह कोड टाइप करें:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif">
      <img src="ice_qcif_15fps.gif">
    </picture>
  </body>
</html>

अपनी सोर्स फ़ाइल (ऊपर दिए गए उदाहरण में ice_qcif_15fps.gif) और AVIF फ़ाइल (animated.avif) को avif_animated_example.html वाली डायरेक्ट्री में कॉपी करें.

3. वेब पेज को Chrome में खोलें.

एचटीएमएल फ़ाइल खोलने का एक तरीका यह है कि avif_animated_example.html को Chrome में खींचें. एचटीएमएल फ़ाइल खोलने का दूसरा विकल्प यह है कि avif_animated_example.html को एचटीटीपी सर्वर से दिखाया जाए.

अब आपकी ऐनिमेटेड AVIF इमेज, Chrome में रेंडर हो जाएगी.

अगर दिए गए सैंपल मीडिया का इस्तेमाल किया जा रहा है, तो यह कुछ ऐसा दिखना चाहिए:

यह जांचने के लिए कि यह ऐनिमेटेड AVIF इमेज है या नहीं, इमेज पर राइट क्लिक करें और Save image as... को चुनें. इससे एक डायलॉग बॉक्स खुलेगा, जिसमें animated.avif दिखेगा. दूसरा विकल्प यह है कि Chrome डेवलपर टूल खोलें और देखें कि animated.avif डाउनलोड हो गया है या नहीं.

7. avifenc की मदद से, ऐनिमेशन वाली AVIF इमेज बनाना

1. अपने सोर्स मीडिया को y4m फ़ॉर्मैट में बदलें.

avifenc, ऐनिमेशन वाली AVIF इमेज बनाने के लिए, इनपुट के तौर पर y4m का इस्तेमाल करता है. y4m फ़ाइलें बनाने के लिए, FFmpeg का इस्तेमाल करना एक बेहतरीन विकल्प है.

Y4m फ़ाइलों को कंप्रेस नहीं किया जाता है. इसलिए, इनका साइज़ बहुत बड़ा हो सकता है.

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

2. ऐनिमेशन वाली AVIF इमेज बनाएं.

अगर आपके पास कोई सोर्स मीडिया फ़ाइल नहीं है, तो हमने आपके लिए एक y4m फ़ाइल बनाई है: ice_qcif_15fps.y4m. यह फ़ाइल, Xiph.org Video Test Media से है.

y4m फ़ाइल से ऐनिमेटेड AVIF इमेज बनाने के लिए, यह कमांड चलाएं.

./avifenc ice_qcif_15fps.y4m animated.avif

अब आपके पास ऐनिमेशन वाली दूसरी AVIF इमेज है!

3. वेब पेज पर ऐनिमेटेड AVIF इमेज रेंडर करना.

avif_animated_example.html नाम की फ़ाइल बनाएं.

हमने आपके लिए एक GIF फ़ाइल बनाई है, ताकि अगर आपके पास कोई सोर्स मीडिया फ़ाइल न हो, तो इसका इस्तेमाल किया जा सके: ice_qcif_15fps.gif.

अपने टेक्स्ट एडिटर में avif_animated_example.html खोलें और यह कोड टाइप करें:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif">
      <img src="ice_qcif_15fps.gif">
    </picture>
  </body>
</html>

अपनी सोर्स फ़ाइल (ऊपर दिए गए उदाहरण में ice_qcif_15fps.gif) और AVIF फ़ाइल (animated.avif) को avif_animated_example.html वाली डायरेक्ट्री में कॉपी करें.

4. वेब पेज को Chrome में खोलें.

एचटीएमएल फ़ाइल खोलने का एक तरीका यह है कि avif_animated_example.html को Chrome में खींचें. एचटीएमएल फ़ाइल खोलने का दूसरा विकल्प यह है कि avif_animated_example.html को एचटीटीपी सर्वर से दिखाया जाए.

अब आपकी ऐनिमेटेड AVIF इमेज, Chrome में रेंडर होनी चाहिए.

अगर दिए गए सैंपल मीडिया का इस्तेमाल किया जा रहा है, तो यह कुछ ऐसा दिखना चाहिए:

ऐनिमेशन वाले AVIF को छोड़कर, बाकी सभी फ़ॉर्मैट में क्वालिटी काफ़ी बेहतर है.

यह जांचने के लिए कि यह ऐनिमेटेड AVIF इमेज है या नहीं, इमेज पर राइट क्लिक करें और Save image as... को चुनें. इससे एक डायलॉग बॉक्स खुलेगा, जिसमें animated.avif दिखेगा. दूसरा विकल्प यह है कि Chrome डेवलपर टूल खोलें और देखें कि animated.avif डाउनलोड हो गया है या नहीं.

5. AVIF एन्कोडिंग की क्वालिटी बदलना.

ice_qcif_15fps.gif फ़ाइल का साइज़ करीब सात गुना बड़ा है और इसकी क्वालिटी भी बहुत खराब है. क्वालिटी पैरामीटर को 20 पर सेट करके, AVIF की क्वालिटी को ice_qcif_15fps.gif की क्वालिटी के आस-पास लाया जा सकता है.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

अब ऐनिमेटेड AVIF फ़ाइल और ice_qcif_15fps.gif की क्वालिटी करीब-करीब एक जैसी है. हालांकि, GIF फ़ाइल का साइज़ ~22 गुना बड़ा है.

8. बधाई हो!

आपने AVIF फ़ॉर्मैट में इमेज दिखाने वाला कोड लैब पूरा कर लिया है!

उम्मीद है कि आपको यह समझ आ गया होगा कि AVIF की मदद से, इमेज के साइज़ को कैसे छोटा किया जा सकता है. साथ ही, वेब पर इमेज को ज़्यादा बेहतर तरीके से कैसे ट्रांसमिट किया जा सकता है. Jake Archibald की इस बेहतरीन पोस्ट में, AVIF की सुविधाओं के बारे में ज़्यादा जानें.