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

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

<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 पिक्सल के कंटेनर में दिखाया जाता है, तो 1, 000 पिक्सल का स्क्वेयर साइज़ (इसे इंट्रिन्सिक साइज़ कहा जाता है) अब सबसे सही साइज़ है. इसी तरह, अगर डिवाइस का डीपीआर 3 है, तो 1,500 पिक्सल की स्क्वेयर इमेज का साइज़ सबसे सही होगा.

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"
>

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

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

sizes

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

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

<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 होगी, जिसकी चौड़ाई 1,000 पिक्सल (1000w) है.

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

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

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

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

संपीड़न

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

  1. लोस-लेवल कंप्रेसन
  2. बिना किसी डेटा के नुकसान के कॉम्प्रेस करना

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

लॉसलेस कंप्रेसन की सुविधा, इमेज को कंप्रेस करके फ़ाइल का साइज़ कम करती है. लॉसलेस कंप्रेसन, आस-पास के पिक्सल के अंतर के आधार पर किसी पिक्सल के बारे में बताता है. लॉसलेस कंप्रेसन का इस्तेमाल, GIF, PNG, WebP, और एवीआईएफ़ इमेज फ़ॉर्मैट के लिए किया जाता है.

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 पिक्सल चौड़ी एक्सट्रिंसिक साइज़ में देखते हैं. दूसरी ओर, डीपीआर 3 वाले मोबाइल उपयोगकर्ता, ज़्यादा बड़ी image-1500.jpg इमेज डाउनलोड कर सकते हैं. यह वही इमेज है जिसका इस्तेमाल डीपीआर 3 वाले डेस्कटॉप डिवाइसों पर किया जाता है.

<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 अनुरोध हेडर के कॉन्टेंट के आधार पर, जवाबों में बदलाव किए जा सकते हैं. ऐसा, वेब सर्वर के ज़्यादातर टाइप में किया जा सकता है. उदाहरण के लिए, mod_rewrite का इस्तेमाल करके Accept हेडर के आधार पर, Apache सर्वर पर इमेज के अनुरोधों को फिर से लिखा जा सकता है.

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

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

लेज़ी लोडिंग

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

decoding

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

इमेज के डेमो

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

कौनसे इमेज फ़ॉर्मैट, लॉसलेस कंप्रेसन के साथ काम करते हैं?

PNG.
JPEG.
WebP.
GIF.
AVIF.

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

JPEG.
AVIF.
GIF.
PNG.
WebP.

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

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

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

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

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

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