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

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

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

इमेज का आकार

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

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

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

पहले वाले उदाहरण पर फिर से गौर करें, अगर डिवाइस का डीपीआर 2 है और इमेज पहले 500 पिक्सल x 500 पिक्सल कंटेनर में दिखाया जाता है. इसके बाद, 1000 पिक्सल की स्क्वेयर इमेज (इसे ओरिजनल साइज़ कहा जाता है) अब सबसे सही साइज़ है. इसी तरह, अगर डिवाइस का 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 का इस्तेमाल करने के लिए, डिवाइसों पर image-1000.jpg 2 के DPR के साथ और 3 DPR वाले डिवाइसों पर image-1500.jpg.

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

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 का डिस्क्रिप्टर बताता है कि इमेज की चौड़ाई है 1000 पिक्सल चौड़ा.

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

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

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

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

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

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

संपीड़न

जहां इमेज का संबंध है, वहां दो तरह के कंप्रेस किए जा सकते हैं:

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 फ़ॉर्मैट को प्राथमिकता दी जाती है. JPEG फ़ॉर्मैट में कॉपी करें अगर AVIF या WebP में से कोई भी काम नहीं करता है.

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

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

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

इस अतिरिक्त क्वेरी की मदद से, आपको यह जानकारी मिलेगी कि 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>

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

इमेज के डेमो

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

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

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