AVIF इमेज दिखाना

1. परिचय

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

AVIF क्या है?

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

AVIF क्यों?

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

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

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

आपको इनकी ज़रूरत होगी

• Chrome का 85 या उसके बाद का वर्शन
• टेक्स्ट एडिटर
• सीमेक
• गिट
• निंजा
• इमेज. मैंने यहां एक आईडी दिया था
• FFmpeg

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

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

1. https://squoosh.app खोलें
2. Squoosh पर स्थानीय इमेज छोड़ें.

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

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

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

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

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

आप अपनी AVIF इमेज को Chrome पर खींचकर देख सकते हैं.

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

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

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 पर जाएं. हम एविएफ़ेंस बनाने जा रहे हैं, ताकि इसे 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

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

make

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

4. एविफ़ेन्क के साथ AVIF इमेज बनाना

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

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

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–कम से कम 0 –ज़्यादा से ज़्यादा 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a Deltaq-mode=3 -a Sharpness=3 -y 420" AVIF इमेज के लिए सुझाई गई सेटिंग हैं.

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

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

2. एन्कोडर की रफ़्तार बढ़ाई जा रही है.

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

./avifenc happy_dog.jpg example.avif --jobs 8

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

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 इमेज को रेंडर करता है और ब्राउज़र ऐसा नहीं करता है, तो हम JPEG पर फ़ॉलबैक के साथ, AVIF इमेज को रेंडर करने के लिए एलिमेंट का इस्तेमाल करते हैं. आपको के बारे में ज़्यादा जानकारी यहां मिल सकती है.

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

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

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

6. एनिमेटेड AVIF इमेज बनाना

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

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

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

ffmpeg -i input.gif -pix_fmt yuv420p -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.

ध्यान दें कि gif फ़ाइल ~35 गुना बड़ी और बहुत खराब क्वालिटी की है.

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 को छोड़कर, बहुत बेहतर गुणवत्ता है.

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

7. बधाई हो!

आपने AVIF इमेज कोड लैब दिखाने की प्रोसेस पूरी कर ली है!

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