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

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

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

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

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

ज़्यादातर मामलों में, डाइमेंशन की जानकारी न देने पर भी इमेज धीरे-धीरे लोड होती हैं. हालांकि, कुछ मामलों में आपको सावधानी बरतनी चाहिए. 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" पर सेट होने की वजह से टाल दी जाती थीं. हालांकि, Lite मोड और 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 काम न करता हो. यह इस तरह से काम करता है:

• काम न करने वाले ब्राउज़र में, ऐडवांस लोड होने से बचने के लिए, <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 में इस सुविधा के चालू होने पर, कोई असामान्य व्यवहार दिख रहा है? गड़बड़ी की शिकायत करें!