AVIF इमेज दिखाना

1. परिचय

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

AVIF क्या है?

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

एवीआईएफ़ फ़ॉर्मैट का इस्तेमाल क्यों करें?

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

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

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

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

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

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

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

  1. https://squoosh.app खोलें
  2. Squoosh पर कोई लोकल इमेज छोड़ें.

Squoosh का स्क्रीनशॉट

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

Squoosh ड्रॉप-डाउन बॉक्स

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

Squoosh का डाउनलोड बटन

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

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

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

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

3. कमांड लाइन एन्कोडर avifenc बनाया जा रहा है

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

  1. कोड पाएं.
git clone https://github.com/AOMediaCodec/libavif.git
  1. libavif डायरेक्ट्री पर जाएं.
cd libavif/

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

  1. कमांड लाइन एन्कोडिंग टूल, 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 इमेज है!

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

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

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 फ़ाइल (eaxmple.avif) को उसी डायरेक्ट्री में कॉपी करें जिसमें avif_example.html मौजूद है.

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

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

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

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

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

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

y4m फ़ाइल से ऐनिमेशन वाली AVIF इमेज बनाने के लिए, इस कमांड का इस्तेमाल करें.

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

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

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

अपने टेक्स्ट एडिटर में 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 वाली डायरेक्ट्री में कॉपी करें.

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

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

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

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

ऐनिमेटेड आइस रिंक

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

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

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m
  1. ऐनिमेशन वाली AVIF इमेज बनाएं.

y4m फ़ाइल से ऐनिमेशन वाली AVIF इमेज बनाने के लिए, इस कमांड का इस्तेमाल करें.

./avifenc ice_qcif_15fps.y4m animated.avif

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

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

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

अपने टेक्स्ट एडिटर में 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 वाली डायरेक्ट्री में कॉपी करें.

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

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

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

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

ऐनिमेटेड आइस रिंक

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

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

ice_qcif_15fps.gif फ़ाइल का साइज़, ~7 गुना ज़्यादा है और इसकी क्वालिटी भी बहुत खराब है. क्वालिटी पैरामीटर को 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 फ़ॉर्मैट, आपकी इमेज को छोटा और वेब पर ट्रांसफ़र करने के लिए ज़्यादा असरदार कैसे बना सकता है. AVIF की सुविधाओं के बारे में ज़्यादा जानने के लिए, Jake Archibald की यह बेहतरीन पोस्ट पढ़ें.