इमेज की परफ़ॉर्मेंस

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

किसी पेज में इमेज जोड़ने के लिए, <img> या <picture> एलिमेंट का इस्तेमाल किया जा सकता है. इसके अलावा, सीएसएस की background-image प्रॉपर्टी का इस्तेमाल करके भी इमेज जोड़ी जा सकती है.

इमेज का आकार

इमेज ऐसेट का इस्तेमाल करते समय, सबसे पहले इमेज को सही साइज़ में दिखाना ज़रूरी है. इस मामले में, साइज़ का मतलब इमेज के डाइमेंशन से है. अन्य वैरिएबल को ध्यान में न रखते हुए, 500 पिक्सल x 500 पिक्सल वाले कंटेनर में दिखाई गई इमेज का साइज़ 500 पिक्सल x 500 पिक्सल होगा. उदाहरण के लिए, 1,000 पिक्सल की वर्गाकार इमेज का इस्तेमाल करने का मतलब है कि इमेज, ज़रूरत से दोगुनी बड़ी है.

हालांकि, इमेज का सही साइज़ चुनने में कई वैरिएबल शामिल होते हैं. इसलिए, हर मामले में इमेज का सही साइज़ चुनना काफ़ी मुश्किल होता है. साल 2010 में, जब iPhone 4 लॉन्च हुआ, तब इसका स्क्रीन रिज़ॉल्यूशन (640x960) iPhone 3 (320x480) के मुकाबले दोगुना था. हालांकि, iPhone 4 की स्क्रीन का फ़िज़िकल साइज़, iPhone 3 के साइज़ के बराबर ही था.

ज़्यादा रिज़ॉल्यूशन पर सब कुछ दिखाने से, टेक्स्ट और इमेज का साइज़ काफ़ी छोटा हो जाता. यह साइज़, पहले के साइज़ का आधा होता. इसके बजाय, एक पिक्सल, दो डिवाइस पिक्सल बन गया. इसे डिवाइस पिक्सल का अनुपात (डीपीआर) कहा जाता है. iPhone 4 और इसके बाद रिलीज़ हुए कई iPhone मॉडल का डीपीआर 2 था.

पिछले उदाहरण पर वापस आते हैं. अगर डिवाइस का डीपीआर 2 है और इमेज को 500 पिक्सल x 500 पिक्सल वाले कंटेनर में दिखाया गया है, तो अब 1000 पिक्सल वाली स्क्वेयर इमेज (जिसे इंट्रिंसिक साइज़ कहा जाता है) सबसे सही साइज़ है. इसी तरह, अगर डिवाइस का डीपीआर 3 है, तो 1500 पिक्सल की स्क्वेयर इमेज सबसे सही साइज़ की होगी.

srcset

<img> एलिमेंट, srcset एट्रिब्यूट के साथ काम करता है. इसकी मदद से, इमेज सोर्स की एक ऐसी सूची तय की जा सकती है जिसका इस्तेमाल ब्राउज़र कर सकता है. बताए गए हर इमेज सोर्स में, इमेज का यूआरएल और चौड़ाई या पिक्सल डेनसिटी डिस्क्रिप्टर शामिल होना चाहिए.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

ऊपर दिए गए एचटीएमएल स्निपेट में, पिक्सल डेंसिटी डिस्क्रिप्टर का इस्तेमाल किया गया है. इससे ब्राउज़र को यह जानकारी मिलती है कि डीपीआर 1 वाले डिवाइसों पर image-500.png, डीपीआर 2 वाले डिवाइसों पर image-1000.jpg, और डीपीआर 3 वाले डिवाइसों पर image-1500.jpg का इस्तेमाल करना है.

यह सब कुछ आसान लग सकता है, लेकिन किसी पेज के लिए सबसे अच्छी इमेज चुनते समय, स्क्रीन के डीपीआर के अलावा और भी बातों का ध्यान रखना होता है. पेज का लेआउट भी एक अहम पहलू है.

sizes

पिछला समाधान सिर्फ़ तब काम करता है, जब सभी व्यू पोर्ट पर इमेज को एक ही सीएसएस पिक्सल साइज़ में दिखाया जाता हो. ज़्यादातर मामलों में, पेज का लेआउट और कंटेनर का साइज़, उपयोगकर्ता के डिवाइस के हिसाब से बदलता है.

sizes एट्रिब्यूट की मदद से, सोर्स साइज़ का एक सेट तय किया जा सकता है. इसमें हर सोर्स साइज़ में मीडिया कंडीशन और वैल्यू होती है. sizes एट्रिब्यूट, सीएसएस पिक्सल में इमेज के डिसप्ले साइज़ के बारे में बताता है. srcset चौड़ाई के बारे में बताने वाले डिस्क्रिप्टर के साथ इस्तेमाल करने पर, ब्राउज़र यह चुन सकता है कि उपयोगकर्ता के डिवाइस के लिए कौनसी इमेज सबसे सही है.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

ऊपर दिए गए एचटीएमएल स्निपेट में, srcset एट्रिब्यूट, इमेज कैंडिडेट की एक सूची तय करता है. ब्राउज़र इनमें से किसी एक को चुन सकता है. इन्हें कॉमा लगाकर अलग किया जाता है. सूची में मौजूद हर इमेज के लिए, इमेज का यूआरएल दिया जाता है. इसके बाद, इमेज की ओरिजनल चौड़ाई बताने वाला सिंटैक्स दिया जाता है. किसी इमेज का ओरिजनल साइज़, उसके डाइमेंशन होते हैं. उदाहरण के लिए, 1000w के डेस्क्रिप्टर से पता चलता है कि इमेज की ओरिजनल चौड़ाई 1,000 पिक्सल है.

इस जानकारी का इस्तेमाल करके, ब्राउज़र sizes एट्रिब्यूट में मीडिया की स्थिति का आकलन करता है. इस मामले में, ब्राउज़र को यह निर्देश दिया गया है कि अगर डिवाइस के व्यूपोर्ट की चौड़ाई 768 पिक्सल से ज़्यादा है, तो इमेज को 500 पिक्सल की चौड़ाई में दिखाया जाए. छोटे डिवाइसों पर, इमेज 100vw या पूरे व्यूपोर्ट की चौड़ाई में दिखती है.

इसके बाद, ब्राउज़र इस जानकारी को srcset इमेज सोर्स की सूची के साथ जोड़कर, सबसे अच्छी इमेज ढूंढ सकता है. उदाहरण के लिए, अगर उपयोगकर्ता के पास 320 पिक्सल चौड़ाई वाला मोबाइल डिवाइस है और उसका डीपीआर 3 है, तो इमेज 320 CSS pixels x 3 DPR = 960 device pixels पर दिखेगी. इस उदाहरण में, सबसे मिलती-जुलती साइज़ वाली इमेज image-1000.jpg होगी. इसकी ओरिजनल चौड़ाई 1000 पिक्सल (1000w) है.

फ़ाइल फ़ॉर्मैट

ब्राउज़र पर, इमेज फ़ाइल के कई फ़ॉर्मैट काम करते हैं. WebP और AVIF जैसे आधुनिक इमेज फ़ॉर्मैट, PNG या JPEG की तुलना में बेहतर तरीके से कंप्रेस करने की सुविधा देते हैं. इससे आपकी इमेज फ़ाइल का साइज़ कम हो जाता है और उसे डाउनलोड करने में कम समय लगता है. आधुनिक फ़ॉर्मैट में इमेज उपलब्ध कराने से, किसी संसाधन के लोड होने में लगने वाले समय को कम किया जा सकता है. इससे सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) का स्कोर कम हो सकता है.

WebP एक ऐसा फ़ॉर्मैट है जो ज़्यादातर ब्राउज़र के साथ काम करता है. यह सभी मॉडर्न ब्राउज़र पर काम करता है. WebP, JPEG, PNG या GIF की तुलना में अक्सर बेहतर तरीके से कंप्रेस करता है. यह लॉसी और लॉसलेस कंप्रेस करने, दोनों की सुविधा देता है. WebP, ऐल्फ़ा चैनल ट्रांसपैरेंसी को भी सपोर्ट करता है. भले ही, लॉसी कंप्रेशन का इस्तेमाल किया जा रहा हो. यह एक ऐसी सुविधा है जो JPEG कोडेक में उपलब्ध नहीं है.

AVIF, नया इमेज फ़ॉर्मैट है. यह WebP की तरह ज़्यादातर ब्राउज़र पर काम नहीं करता. हालांकि, यह काफ़ी हद तक सभी ब्राउज़र पर काम करता है. AVIF, लॉसलेस और लॉसली, दोनों तरह के कंप्रेशन को सपोर्ट करता है. टेस्ट से पता चला है कि कुछ मामलों में, JPEG की तुलना में AVIF का इस्तेमाल करने पर 50% से ज़्यादा बचत होती है. AVIF में वाइड कलर गैमट (डब्ल्यूसीजी) और हाई डाइनैमिक रेंज (एचडीआर) की सुविधाएं भी मिलती हैं.

संपीड़न

इमेज के मामले में, दो तरह का कंप्रेशन होता है:

  1. लॉसी कंप्रेशन
  2. बिना क्वालिटी में बदलाव किए कंप्रेस करना

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

लॉसलेस कंप्रेस करने से, इमेज को कंप्रेस करके फ़ाइल का साइज़ कम किया जाता है. हालांकि, इससे डेटा का नुकसान नहीं होता. लॉसलैस कंप्रेशन में, किसी पिक्सल को उसके आस-पास के पिक्सल से अलग करके दिखाया जाता है. लॉसलेस कंप्रेशन का इस्तेमाल GIF, PNG, WebP, और AVIF इमेज फ़ॉर्मैट के लिए किया जाता है.

Squoosh, ImageOptim या इमेज ऑप्टिमाइज़ेशन सेवा का इस्तेमाल करके, इमेज कंप्रेस की जा सकती हैं. कंप्रेस करते समय, कोई ऐसी सामान्य सेटिंग नहीं होती जो सभी मामलों के लिए सही हो. हमारा सुझाव है कि आप अलग-अलग कंप्रेशन लेवल के साथ एक्सपेरिमेंट करें. इससे आपको इमेज क्वालिटी और फ़ाइल के साइज़ के बीच बेहतर समझौता करने में मदद मिलेगी. इमेज ऑप्टिमाइज़ेशन की कुछ बेहतर सेवाएं, इस काम को आपके लिए अपने-आप कर सकती हैं. हालांकि, ऐसा हो सकता है कि ये सभी उपयोगकर्ताओं के लिए फ़ायदेमंद न हों.

<picture> एलिमेंट

<picture> एलिमेंट की मदद से, एक से ज़्यादा इमेज कैंडिडेट तय करने में आपको ज़्यादा सहूलियत मिलती है:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg">
</picture>

<picture> एलिमेंट में <source> एलिमेंट का इस्तेमाल करने पर, AVIF और WebP इमेज के लिए सहायता जोड़ी जा सकती है. हालांकि, अगर ब्राउज़र नए फ़ॉर्मैट के साथ काम नहीं करता है, तो इमेज के ज़्यादातर फ़ॉर्मैट के साथ काम करने वाले लेगसी फ़ॉर्मैट पर वापस आएं. इस तरीके से, ब्राउज़र, मैच होने वाले पहले <source> एलिमेंट को चुनता है. अगर इमेज को उस फ़ॉर्मैट में रेंडर किया जा सकता है, तो उसका इस्तेमाल किया जाता है. ऐसा न होने पर, ब्राउज़र अगले <source> एलिमेंट पर चला जाता है. ऊपर दिए गए एचटीएमएल स्निपेट में, AVIF फ़ॉर्मैट को WebP फ़ॉर्मैट से ज़्यादा प्राथमिकता दी गई है. अगर AVIF या WebP, दोनों में से किसी भी फ़ॉर्मैट का इस्तेमाल नहीं किया जा सकता, तो JPEG फ़ॉर्मैट का इस्तेमाल किया जाएगा.

<picture> एलिमेंट के लिए, उसमें नेस्ट किया गया <img> एलिमेंट ज़रूरी है. alt, width, और height एट्रिब्यूट, <img> पर तय किए जाते हैं और इनका इस्तेमाल किया जाता है. भले ही, कोई भी <source> चुना गया हो.

<source> एलिमेंट, media, srcset, और sizes एट्रिब्यूट के साथ भी काम करता है. <img> के पिछले उदाहरण की तरह ही, ये ब्राउज़र को बताते हैं कि अलग-अलग व्यूपोर्ट पर कौनसी इमेज चुननी है.

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg">
</picture>

media एट्रिब्यूट, मीडिया की स्थिति को लेता है. ऊपर दिए गए उदाहरण में, डिवाइस के डीपीआर को मीडिया की स्थिति के तौर पर इस्तेमाल किया गया है. डीपीआर 1.5 या इससे ज़्यादा वाले किसी भी डिवाइस पर, पहले <source> एलिमेंट का इस्तेमाल किया जाएगा. <source> एलिमेंट, ब्राउज़र को बताता है कि 768 पिक्सल से ज़्यादा चौड़ाई वाले व्यूपोर्ट वाले डिवाइसों पर, चुनी गई इमेज को 500 पिक्सल की चौड़ाई में दिखाया जाता है. छोटे डिवाइसों पर, यह व्यूपोर्ट की पूरी चौड़ाई में दिखता है. media और srcset एट्रिब्यूट को एक साथ इस्तेमाल करके, यह बेहतर तरीके से कंट्रोल किया जा सकता है कि कौनसी इमेज इस्तेमाल करनी है.

इसे यहां दी गई टेबल में दिखाया गया है. इसमें व्यूपोर्ट की अलग-अलग चौड़ाई और डिवाइस पिक्सल रेशियो का आकलन किया गया है:

व्यूपोर्ट की चौड़ाई (पिक्सल में) 1 डीपीआर 1.5 डीपीआर 2 डीपीआर 3 डीपीआर
320 500.jpg 500.jpg 500.jpg 1000.jpg
480 500.jpg 500.jpg 1000.jpg 1500.jpg
560 500.jpg 1000.jpg 1000.jpg 1500.jpg
1024 500.jpg 1000.jpg 1000.jpg 1500.jpg
1920 500.jpg 1000.jpg 1000.jpg 1500.jpg

जिन डिवाइसों का डीपीआर 1 होता है वे image-500.jpg इमेज डाउनलोड करते हैं. इनमें डेस्कटॉप का इस्तेमाल करने वाले ज़्यादातर लोग शामिल हैं. ये लोग, इमेज को 500 पिक्सल की चौड़ाई वाले एक्सट्रिंसिक साइज़ में देखते हैं. वहीं दूसरी ओर, तीन डीपीआर वाले मोबाइल उपयोगकर्ताओं को, तीन डीपीआर वाले डेस्कटॉप डिवाइसों पर इस्तेमाल की गई इमेज की तुलना में, बड़ी image-1500.jpg डाउनलोड करने का विकल्प मिलता है.

<picture>
  <source
    media="(min-width: 561px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw">
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg">
</picture>

इस उदाहरण में, <picture> एलिमेंट को इस तरह से अडजस्ट किया गया है कि इसमें एक और <source> एलिमेंट शामिल किया जा सके. इससे ज़्यादा डीपीआर वाले बड़े डिवाइसों के लिए अलग-अलग इमेज इस्तेमाल की जा सकेंगी:

व्यूपोर्ट की चौड़ाई (पिक्सल में) 1 डीपीआर 1.5 डीपीआर 2 डीपीआर 3 डीपीआर
320 500.jpg 500.jpg 1000-sm.jpg 1000-sm.jpg
480 500.jpg 500.jpg 1000-sm.jpg 1500-sm.jpg
560 500.jpg 1000-sm.jpg 1000-sm.jpg 1500-sm.jpg
1024 500.jpg 1000.jpg 1000.jpg 1500.jpg
1920 500.jpg 1000.jpg 1000.jpg 1500.jpg

इस अतिरिक्त क्वेरी से, यह देखा जा सकता है कि image-1000-sm.jpg और image-1500-sm.jpg छोटे व्यूपोर्ट पर दिख रहे हैं. इस अतिरिक्त जानकारी की मदद से, इमेज को और कंप्रेस किया जा सकता है. ऐसा इसलिए, क्योंकि उस साइज़ और डेनसिटी पर कंप्रेस करने से जुड़ी गड़बड़ियां ज़्यादा नहीं दिखती हैं. साथ ही, डेस्कटॉप डिवाइसों पर इमेज की क्वालिटी भी खराब नहीं होती है.

इसके अलावा, srcset और media एट्रिब्यूट में बदलाव करके, छोटे व्यूपोर्ट पर बड़ी इमेज दिखाने से बचा जा सकता है:

<picture>
  <source
    media="(min-width: 561px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x">
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg">
</picture>

ऊपर दिए गए एचटीएमएल स्निपेट में, चौड़ाई के डिस्क्रिप्टर हटा दिए गए हैं. इनकी जगह डिवाइस पिक्सल के अनुपात वाले डिस्क्रिप्टर का इस्तेमाल किया गया है. मोबाइल डिवाइस पर दिखाई जाने वाली इमेज, /image-500.jpg या /image-1000.jpg तक सीमित होती हैं. भले ही, डिवाइस का डीपीआर 3 हो.

जटिलता को मैनेज करना

रिस्पॉन्सिव इमेज के साथ काम करते समय, आपको हर इमेज के लिए अलग-अलग साइज़ और फ़ॉर्मैट मिल सकते हैं. ऊपर दिए गए उदाहरण में, हर साइज़ के लिए वेरिएशन का इस्तेमाल किया गया है. हालांकि, इसमें AVIF और WebP को शामिल नहीं किया गया है. आपके पास कितने वैरिएंट होने चाहिए? इंजीनियरिंग से जुड़ी कई समस्याओं की तरह, इसका जवाब भी "यह इस बात पर निर्भर करता है" होता है.

सबसे सही विज्ञापन दिखाने के लिए, कई वैरिएंट का इस्तेमाल किया जा सकता है. हालांकि, हर अतिरिक्त इमेज वैरिएंट की एक लागत होती है. साथ ही, इससे ब्राउज़र कैश मेमोरी का कम असरदार तरीके से इस्तेमाल होता है. सिर्फ़ एक वैरिएंट होने पर, हर उपयोगकर्ता को एक ही इमेज मिलती है. इसलिए, इसे बहुत आसानी से कैश मेमोरी में सेव किया जा सकता है.

दूसरी ओर, अगर कई वैरिएंट हैं, तो हर वैरिएंट के लिए एक और कैश मेमोरी एंट्री की ज़रूरत होती है. अगर वैरिएंट की कैश मेमोरी की एंट्री की समयसीमा खत्म हो गई है और इमेज को ऑरिजिन सर्वर से फिर से फ़ेच करना है, तो सर्वर का खर्च बढ़ सकता है और परफ़ॉर्मेंस खराब हो सकती है.

इसके अलावा, हर वर्शन के साथ आपके एचटीएमएल दस्तावेज़ का साइज़ बढ़ता जाता है. आपको हर इमेज के लिए कई किलोबाइट का एचटीएमएल शिप करना पड़ सकता है.

Accept अनुरोध हेडर के आधार पर इमेज दिखाएं

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

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

ऊपर दिया गया एचटीएमएल स्निपेट, उस कोड का आसान वर्शन है जिसे अपने सर्वर के JavaScript बैकएंड में जोड़ा जा सकता है. इससे सबसे सही इमेज फ़ॉर्मैट को चुना और दिखाया जा सकता है. अगर अनुरोध Accept हेडर में image/avif शामिल है, तो AVIF इमेज दिखाई जाती है. अगर Accept हेडर में image/webp शामिल नहीं है, तो WebP इमेज दिखाई जाएगी. अगर इनमें से कोई भी शर्त पूरी नहीं होती है, तो JPEG इमेज दिखाई जाती है.

Accept अनुरोध हेडर के कॉन्टेंट के आधार पर, लगभग हर तरह के वेब सर्वर में जवाबों में बदलाव किया जा सकता है. उदाहरण के लिए, Apache सर्वर पर Accept हेडर के आधार पर, mod_rewrite का इस्तेमाल करके इमेज के अनुरोधों को फिर से लिखा जा सकता है.

यह इमेज कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) पर दिखने वाले व्यवहार से अलग नहीं है. इमेज सीडीएन, इमेज को ऑप्टिमाइज़ करने और उपयोगकर्ता के डिवाइस और ब्राउज़र के हिसाब से सबसे सही फ़ॉर्मैट भेजने के लिए बेहतरीन समाधान हैं.

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

लेज़ी लोडिंग

loading एट्रिब्यूट का इस्तेमाल करके, ब्राउज़र को यह निर्देश दिया जा सकता है कि जब इमेज व्यूपोर्ट में दिखें, तब उन्हें लेज़ी लोड किया जाए. lazy एट्रिब्यूट की वैल्यू, ब्राउज़र को यह निर्देश देती है कि जब तक इमेज व्यूपोर्ट में न हो या उसके आस-पास न हो, तब तक उसे डाउनलोड न किया जाए. इससे बैंडविड्थ बचता है. साथ ही, ब्राउज़र को उन संसाधनों को प्राथमिकता देने की अनुमति मिलती है जिनकी उसे व्यूपोर्ट में मौजूद ज़रूरी कॉन्टेंट को रेंडर करने के लिए ज़रूरत होती है.

डिकोडिंग एट्रिब्यूट

decoding एट्रिब्यूट, ब्राउज़र को बताता है कि उसे इमेज को कैसे डिकोड करना चाहिए. इन तीन वैल्यू का इस्तेमाल किया जा सकता है:

  • async ब्राउज़र को बताता है कि इमेज को एसिंक्रोनस तरीके से डिकोड किया जा सकता है. इससे, दूसरे कॉन्टेंट को रेंडर करने में लगने वाला समय कम हो सकता है.
  • sync ब्राउज़र को बताता है कि इमेज को अन्य कॉन्टेंट के साथ ही दिखाया जाना चाहिए.
  • auto (डिफ़ॉल्ट) सेटिंग की मदद से, ब्राउज़र यह तय कर सकता है कि उपयोगकर्ता के लिए सबसे सही क्या है.

JavaScript में, DOM में इमेज डालते समय, HTMLImageElement के इंस्टेंस पर decode तरीके का इस्तेमाल किया जा सकता है.

इमेज डेमो

अपने ज्ञान को परखें

लॉसलेस कंप्रेस करने की सुविधा, किन इमेज फ़ॉर्मैट के साथ काम करती है?

GIF.
सही!
JPEG.
फिर से कोशिश करें.
PNG.
सही!
WebP.
सही!
AVIF.
सही!

लॉसी कंप्रेस करने की सुविधा के साथ कौनसे इमेज फ़ॉर्मैट काम करते हैं?

GIF.
फिर से कोशिश करें. GIF फ़ॉर्मैट में सिर्फ़ 256 रंगों का इस्तेमाल किया जा सकता है. इसलिए, GIF में बदलने से पहले लॉसलेस एन्कोडिंग की जानी चाहिए.
JPEG.
सही!
PNG.
फिर से कोशिश करें.
WebP.
सही!
AVIF.
सही!

चौड़ाई डिस्क्रिप्टर (उदाहरण के लिए, 1000w) से ब्राउज़र को srcset एट्रिब्यूट में बताई गई इमेज के बारे में क्या जानकारी मिलती है?

इमेज की बाहरी चौड़ाई. इसका मतलब है कि पेज पर स्टाइल लागू होने के बाद, लेआउट में इमेज के डाइमेंशन
फिर से कोशिश करें.
इमेज की मूल चौड़ाई. इसका मतलब है कि इमेज के डाइमेंशन.
सही!

sizes एट्रिब्यूट, ब्राउज़र को उस <img> एलिमेंट के बारे में क्या बताता है जिस पर इसे लागू किया गया है?

यह लॉजिक बताता है कि उपयोगकर्ता के मौजूदा व्यूपोर्ट के डाइमेंशन के हिसाब से, <img> एलिमेंट के srcset में बताए गए किस कैंडिडेट को लोड किया जाना चाहिए.
सही!
<img> एलिमेंट के srcset एट्रिब्यूट से लोड की जाने वाली इमेज की इंट्रिंसिक चौड़ाई.
फिर से कोशिश करें.

अगला: वीडियो की परफ़ॉर्मेंस

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