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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

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

ब्राउज़र-लेवल पर लेज़ी लोडिंग की सुविधा क्यों?

HTTP Archive के मुताबिक, ज़्यादातर वेबसाइटों के लिए इमेज, सबसे ज़्यादा अनुरोध की जाने वाली ऐसेट होती हैं. साथ ही, आम तौर पर वे किसी भी अन्य रिसॉर्स की तुलना में ज़्यादा बैंडविथ लेती हैं. 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 में नेटवर्क थ्रॉटलिंग करके, इन अलग-अलग सीमाओं के साथ प्रयोग किया जा सकता है.

डेटा बचाने की सुविधा और व्यूपोर्ट से दूरी की सीमाओं में सुधार

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

तेज़ कनेक्शन (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 तय न करने से, Cumulative Layout Shift पर उनका असर बढ़ जाता है. अगर अपनी इमेज के डाइमेंशन तय नहीं किए जा सकते, तो उन्हें लेज़ी लोड करने से नेटवर्क रिसॉर्स बचाए जा सकते हैं. हालांकि, इससे लेआउट में होने वाले बदलावों का खतरा बढ़ जाता है.

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

लेज़ी लोडिंग के साथ काम न करने वाले ब्राउज़र को कैसे मैनेज किया जाए?

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

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

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

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

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

• ऐसे ब्राउज़र में ईगर लोड से बचने के लिए जो इस सुविधा के साथ काम नहीं करते, <img src> को <img data-src> से बदलें. अगर loading एट्रिब्यूट के साथ काम करने की सुविधा उपलब्ध है, तो data-src को src से बदलें.
• अगर loading के साथ काम करने की सुविधा उपलब्ध नहीं है, तो lazysizes से फ़ॉलबैक लोड करें और इसे शुरू करें. साथ ही, यह बताने के लिए 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, ब्राउज़र-लेवल पर लेज़ी लोडिंग की सुविधा को पहचानता है?

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

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

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

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