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

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

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

इमेज का आकार

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

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

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

पिछले उदाहरण पर फिर से गौर करें, अगर डिवाइस का DPR 2 है और इमेज को 500 पिक्सल x 500 पिक्सल कंटेनर में दिखाया गया है, तो अब 1,000 पिक्सल की स्क्वेयर इमेज (जिसे इंटिनिक साइज़ कहा जाता है) का साइज़ सबसे सही होगा. इसी तरह, अगर डिवाइस का DPR 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 होगी, जिसकी मूल चौड़ाई 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, और 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> एलिमेंट पर चला जाता है. पिछले एचटीएमएल स्निपेट में, WebP फ़ॉर्मैट की तुलना में AVIF फ़ॉर्मैट को प्राथमिकता दी जाती है. अगर 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: 560px) 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 500.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: 560px)"
    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 शामिल है, तो एवीएफ़ इमेज दिखाई जाती है. अगर ऐसा नहीं है, तो Accept हेडर में image/webp मौजूद होने पर, WebP इमेज दिखेगी. अगर इनमें से कोई भी शर्त सही नहीं होती है, तो JPEG इमेज दिखती है.

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

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

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

लेज़ी लोडिंग

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

decoding

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

इमेज डेमो

देखें कि आपको कितना ज्ञान है

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

GIF.
सही जवाब!
JPEG.
फिर से कोशिश करें.
PNG.
सही जवाब!
वेबपी.
सही जवाब!
एवीएफ़.
सही जवाब!

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

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

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

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

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

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

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

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