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

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

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

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

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

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

• Intersection Objectr 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> एलिमेंट से कौनसी इमेज लोड करनी है, लेकिन आपको सिर्फ़ loading को फ़ॉलबैक <img> एलिमेंट में जोड़ना होगा.

पहले व्यूपोर्ट में, हमेशा ईगर-लोड होने वाली इमेज दिखती हैं

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

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" के साथ-साथ तीसरे पक्ष की लाइब्रेरी का इस्तेमाल जारी रखने की एक वजह यह है कि ऐसे ब्राउज़र के लिए पॉलीफ़िल उपलब्ध कराया जाए जो एट्रिब्यूट के साथ काम नहीं करते या लेज़ी लोडिंग के ट्रिगर होने पर ज़्यादा कंट्रोल रखें.

मैं उन ब्राउज़र को कैसे मैनेज करूं जिनमें लेज़ी लोडिंग काम नहीं करती? {browsers-dont-support}

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

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

उदाहरण के लिए, lazysize, 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 को लेज़ी-लोड करने का समय आ गया है!

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

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

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

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

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

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

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

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

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