वेब के लिए ब्राउज़र-लेवल की इमेज लेज़ी लोडिंग

इमेज को लेज़ी-लोड करने के लिए, loading एट्रिब्यूट का इस्तेमाल किया जा सकता है. इसके लिए, आपको कस्टम लेज़ी-लोडिंग कोड लिखें या अलग JavaScript लाइब्रेरी का इस्तेमाल करें. यहाँ है सुविधा का डेमो:

इस पेज पर, ब्राउज़र में लेज़ी-लोडिंग लागू करने का तरीका बताया गया है.

ब्राउज़र-लेवल पर लेज़ी लोडिंग के क्या फ़ायदे हैं?

एचटीटीपी संग्रह के मुताबिक, ज़्यादातर वेबसाइटों के लिए, ऐसी ऐसेट के लिए सबसे ज़्यादा अनुरोध किया जाता है जिनके लिए सबसे ज़्यादा अनुरोध किया जाता है. साथ ही, आम तौर पर किसी भी अन्य संसाधन की तुलना में ज़्यादा बैंडविड्थ इस्तेमाल करता है. 90वें पर्सेंटाइल पर, साइटें डेस्कटॉप और मोबाइल पर 5 एमबी से ज़्यादा इमेज भेजें.

पहले, ऑफ़-स्क्रीन इमेज लोड होने से रोकने के दो तरीके थे:

• Intersection Observer API का इस्तेमाल करना
• scroll, resize या orientationchange इवेंट हैंडलर का इस्तेमाल करना

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

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

loading एट्रिब्यूट

Chrome, इमेज को उनकी जगह की जानकारी के हिसाब से अलग-अलग प्राथमिकताओं के हिसाब से लोड करता है से तय होता है. व्यूपोर्ट के नीचे मौजूद इमेज, कम प्राथमिकता होती है, लेकिन पेज लोड होने पर उन्हें फिर भी फ़ेच किया जाता है.

ऑफ़स्क्रीन लोड होने की प्रोसेस को पूरी तरह से रोकने के लिए, loading एट्रिब्यूट का इस्तेमाल किया जा सकता है इमेज:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

loading एट्रिब्यूट के लिए, ये वैल्यू इस्तेमाल की जा सकती हैं:

• lazy: संसाधन को तब तक लोड न करें, जब तक वह व्यूपोर्ट से तय की गई दूरी.
• eager: ब्राउज़र के लोड होने का डिफ़ॉल्ट तरीका, जो नहीं है इसमें एट्रिब्यूट शामिल होना चाहिए. इसका मतलब है कि इमेज लोड हो गई है, भले ही वह कहीं भी हो जो पेज पर मौजूद होते हैं. यह डिफ़ॉल्ट तौर पर सेट है, लेकिन इसे सेट करने से मदद मिल सकती है साफ़ तौर पर, अगर कोई यूआरएल होने पर आपका टूल, loading="lazy" को अपने-आप जोड़ देता है साफ़ तौर पर वैल्यू डालें या अगर आपका लिंटर साफ़ तौर पर सेट न किया गया हो, तो इसकी शिकायत करें.

loading एट्रिब्यूट और फ़ेच करने की प्राथमिकता के बीच संबंध

eager वैल्यू एक निर्देश है, जो बिना किसी देरी के इमेज को हमेशा की तरह लोड करता है लोड की प्रक्रिया को और कम कर सकते हैं. इससे इमेज तेज़ी से लोड नहीं होती की तुलना करें, जिसमें loading एट्रिब्यूट नहीं है.

अगर आपको किसी अहम इमेज को फ़ेच करने की प्राथमिकता बढ़ानी है, तो एलसीपी इमेज), तो फ़ेच प्राथमिकता का इस्तेमाल इनके साथ करें: fetchpriority="high".

loading="lazy" और fetchpriority="high" वाली इमेज अब भी देरी से दिख रही है यह स्क्रीन से दूर होता है और करीब-करीब पूरा होने पर, उसे ज़्यादा प्राथमिकता के साथ फ़ेच किया जाता है व्यूपोर्ट. यह संयोजन वाकई ज़रूरी नहीं है, क्योंकि ब्राउज़र हाई प्राथमिकता के साथ इमेज लोड कर सकते हैं.

व्यूपोर्ट से दूरी तय करने का थ्रेशोल्ड

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

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

दूरी का थ्रेशोल्ड, इन बातों के आधार पर अलग-अलग होता है:

• फ़ेच किए जा रहे इमेज रिसॉर्स का टाइप
• असरदार कनेक्शन का टाइप

आपको अलग-अलग असरदार कनेक्शन टाइप के लिए डिफ़ॉल्ट वैल्यू, इनमें मिलेंगी Chromium सोर्स. इन अलग-अलग थ्रेशोल्ड का इस्तेमाल करके, ऐसा किया जा सकता है नेटवर्क को थ्रॉटल करना DevTools में.

डेटा की बेहतर बचत और व्यूपोर्ट से दूरी तय करने का थ्रेशोल्ड

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

तेज़ कनेक्शन (4G) पर, हमने Chrome की व्यूपोर्ट से दूरी के थ्रेशोल्ड को 3000px से घटाकर 1250px कर दिया. वहीं, धीमे कनेक्शन (3G या इससे कम) पर, थ्रेशोल्ड को 4000px से बदलकर 2500px कर दिया. इस बदलाव के दो फ़ायदे हैं:

• <img loading=lazy>, JavaScript लेज़ी लोडिंग लाइब्रेरी से मिलने वाले अनुभव के हिसाब से काम करता है.
• व्यू-पोर्ट से दूरी के नए थ्रेशोल्ड का अब भी मतलब है कि इमेज तब तक लोड होंगी, जब तक उपयोगकर्ता उन्हें स्क्रोल करेगा.

यहां फ़ास्ट कनेक्शन (4G) पर हमारे किसी डेमो के लिए, पुराने और नए, व्यूपोर्ट से दूरी के थ्रेशोल्ड के बीच तुलना की जा सकती है:

पुराने थ्रेशोल्ड बनाम नए थ्रेशोल्ड:

और नए थ्रेशोल्ड बनाम LazySizes (एक लोकप्रिय JavaScript लेज़ी लोडिंग लाइब्रेरी):

अपनी इमेज के डाइमेंशन से जुड़े एट्रिब्यूट जोड़ना

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

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

इसके अलावा, सीधे इनलाइन स्टाइल में उनकी वैल्यू दी जा सकती हैं:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

डाइमेंशन सेट करने का सबसे सही तरीका, <img> टैग पर लागू होता है, भले ही भले ही, आपको लेज़ी लोडिंग हो रही हो, लेकिन लेज़ी लोडिंग इसे और ज़रूरी बना सकती है.

Chromium में लेज़ी लोडिंग को इस तरह से लागू किया जाता है कि इमेज के दिखने की संभावना बढ़ जाती है जैसे ही वे दिखाई देंगे, तो उन्हें लोड कर दिया जाता है, लेकिन अब भी संभावना है कि वे सही समय पर लोड नहीं होते. अगर ऐसा होता है, तो width और इमेज पर मौजूद height, लेआउट शिफ़्ट होने पर ज़्यादा असर डालते हैं. अगर आपने आपके पास अपनी इमेज को तय करने का विकल्प नहीं है' डाइमेंशन, लेज़ी लोडिंग से नेटवर्क को बचाया जा सकता है लेआउट में बदलाव होने का जोखिम बढ़ सकता है.

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

बड़ी संख्या में इमेज के साथ loading कैसे काम करता है, इसका उदाहरण यहां देखें यह डेमो.

<picture> एलिमेंट का इस्तेमाल करके तय की गई इमेज को भी लेज़ी-लोड किया जा सकता है:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

हालांकि, ब्राउज़र यह तय करता है कि किसी भी <source> से कौनसी इमेज लोड करनी है एलिमेंट के लिए, आपको फ़ॉलबैक <img> एलिमेंट में सिर्फ़ loading जोड़ना होगा.

पहले व्यूपोर्ट में हमेशा उत्सुकता से लोड होने वाली इमेज दिखाई देती हैं

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

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

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

ग्रेसफ़ुल डिग्रेडेशन

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

अक्सर पूछे जाने वाले सवाल

क्या Chrome में इमेज को अपने-आप लेज़ी-लोड किया जा सकता है?

इससे पहले, Chromium हर उस इमेज को अपने-आप लेज़ी लोड करता था जो उसके हिसाब से सही होती थी लाइट मोड होने पर टाल दिया जाएगा को Android के लिए Chrome पर चालू कर दिया गया था और loading एट्रिब्यूट या तो दिया गया हो या loading="auto" पर सेट किया गया हो. हालांकि, लाइट मोड और loading="auto" को बंद कर दिया गया है साथ ही, Chrome में इमेज को अपने-आप लेज़ी-लोड होने की सुविधा उपलब्ध कराने का कोई प्लान नहीं है.

क्या यह बदलाव किया जा सकता है कि इमेज लोड होने से पहले, उसका व्यूपोर्ट कितना पास होना चाहिए?

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

क्या सीएसएस के बैकग्राउंड की इमेज, loading एट्रिब्यूट का इस्तेमाल कर सकती हैं?

नहीं, इसे सिर्फ़ <img> टैग के साथ इस्तेमाल किया जा सकता है.

क्या loading, व्यूपोर्ट में तुरंत न दिखने वाली इमेज के साथ काम कर सकता है?

loading="lazy" का इस्तेमाल करने से, इमेज लोड न होने पर हो सकता है के बराबर हैं, लेकिन तय की गई दूरी के अंदर हैं. ये इमेज, कैरसेल के पीछे हो सकती हैं या कुछ स्क्रीन के लिए, सीएसएस ने इन्हें छिपाया हो सकता है साइज़. उदाहरण के लिए, Chrome, Safari, और Firefox इसका इस्तेमाल करके इमेज लोड नहीं करते display: none; स्टाइलिंग, इमेज एलिमेंट पर या पैरंट पर एलिमेंट. हालांकि, इमेज छिपाने की अन्य तकनीकें, जैसे कि opacity:0 का इस्तेमाल करना स्टाइलिंग से बनी रहती है, फिर भी ब्राउज़र को इमेज लोड करने में मदद मिलती है. हमेशा अपने लागू करके सुनिश्चित किया जा सकता है कि यह अपेक्षा के अनुरूप काम कर रहा है.

Chrome 121 ने कैरसेल जैसी हॉरिज़ॉन्टल स्क्रोलिंग वाली इमेज के लिए बदलाव किया है. अब ये दोनों थ्रेशोल्ड, वर्टिकल स्क्रोलिंग जैसे थ्रेशोल्ड का इस्तेमाल करते हैं. इसका मतलब है कि कैरसेल के इस्तेमाल के उदाहरण के लिए, इमेज को व्यूपोर्ट में दिखने से पहले लोड किया जाएगा. इसका मतलब है कि उपयोगकर्ता को इमेज लोड होने की संभावना कम ही दिखेगी, लेकिन इसकी वजह से डाउनलोड की संख्या बढ़ सकती है. Chrome बनाम Safari और Firefox के व्यवहार की तुलना करने के लिए, हॉरिज़ॉन्टल लेज़ी लोडिंग डेमो का इस्तेमाल करें.

अगर इमेज को लेज़ी-लोड करने के लिए, पहले से ही किसी तीसरे पक्ष की लाइब्रेरी या स्क्रिप्ट का इस्तेमाल किया जा रहा है, तो क्या होगा?

मॉडर्न ब्राउज़र में मौजूद लेज़ी लोडिंग के साथ काम करने पर, शायद आपको यह काम न करे इमेज को लेज़ी-लोड करने के लिए, तीसरे पक्ष की लाइब्रेरी या स्क्रिप्ट की ज़रूरत होगी.

loading="lazy" के साथ तीसरे पक्ष की लाइब्रेरी का इस्तेमाल जारी रखने की एक वजह है उन ब्राउज़र के लिए पॉलीफ़िल देना है जो एट्रिब्यूट का इस्तेमाल नहीं करते हैं या लेज़ी लोडिंग ट्रिगर होने पर, GA4 प्रॉपर्टी को ज़्यादा कंट्रोल मिलता है.

मैं उन ब्राउज़र को कैसे मैनेज करूं जो लेज़ी लोडिंग के साथ काम नहीं करते?

अपनी साइट पर इमेज को लेज़ी-लोड करने के लिए, पॉलीफ़िल बनाएं या किसी तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करें. loading प्रॉपर्टी का इस्तेमाल करके, यह पता लगाया जा सकता है कि ब्राउज़र, सुविधा:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

उदाहरण के लिए, लेज़ीसाइज़ एक लोकप्रिय ट्रेंड है JavaScript लेज़ी लोडिंग लाइब्रेरी. loading पर काम करने वाले ऐप्लिकेशन का पता लगाया जा सकता है एट्रिब्यूट का इस्तेमाल, फ़ॉलबैक लाइब्रेरी के तौर पर लेज़ीसाइज़ को लोड करने के लिए तब किया जाता है, जब loading समर्थित हैं. यह इस तरह से काम करता है:

• तेज़ी से लोड होने से बचने के लिए, <img src> की जगह <img data-src> का इस्तेमाल करें इस्तेमाल न किए जा सकने वाले ब्राउज़र पर क्लिक करें. अगर loading एट्रिब्यूट काम करता है, तो data-src को स्वैप करें src के लिए.
• अगर loading काम नहीं करता है, तो लेज़ीसाइज़ से फ़ॉलबैक लोड करें और शुरू करें lazyload क्लास का इस्तेमाल करके यह बताया जा सकता है कि किन इमेज को लेज़ी-लोड करना है:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

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

क्या iframe के लिए लेज़ी लोडिंग, ब्राउज़र में भी काम करती है?

<iframe loading=lazy> को स्टैंडर्ड भी बनाया गया है. इसकी मदद से, loading का इस्तेमाल करके iframe को लेज़ी-लोड किया जा सकता है एट्रिब्यूट की वैल्यू सबमिट करें. ज़्यादा जानकारी के लिए, ऑफ़स्क्रीन iframe को लेज़ी-लोड करने का तरीका देखें!

ब्राउज़र-लेवल पर लेज़ी लोडिंग से, किसी वेब पेज पर दिखने वाले विज्ञापनों पर कैसे असर पड़ता है?

किसी भी दूसरे विज्ञापन की तरह, उपयोगकर्ता को इमेज या iframes के तौर पर लेज़ी-लोड होने वाले सभी विज्ञापन दिखाए जाते हैं इमेज या iframe.

वेब पेज प्रिंट करने पर, इमेज कैसे मैनेज की जाती हैं?

पेज प्रिंट होते ही, सभी इमेज और iframe तुरंत लोड हो जाते हैं. यहां जाएं: समस्या #875403 देखें.

क्या लाइटहाउस, ब्राउज़र के लेवल पर लेज़ी लोडिंग की पहचान करता है?

Lighthouse 6.0 और उससे ऊपर का फ़ैक्टर ऑफ़स्क्रीन इमेज के लिए लेज़ी लोडिंग के तरीके बताए गए हैं. इनमें अलग-अलग थ्रेशोल्ड इस्तेमाल किए जा सकते हैं. जिससे उन्हें पूरे समाचार संगठन ऑफ़स्क्रीन इमेज को टालें.

परफ़ॉर्मेंस को बेहतर बनाने के लिए, इमेज को लेज़ी लोड करें

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

क्या आपको Chrome में चालू की गई इस सुविधा का इस्तेमाल करते समय कोई असामान्य व्यवहार दिख रहा है? गड़बड़ी की शिकायत करें!