रिस्पॉन्सिव इमेज को पहले से लोड करें

Barry Pollard

Yoav Weiss

पब्लिश करने की तारीख: 30 सितंबर, 2019, पिछली बार अपडेट करने की तारीख: 10 जुलाई, 2026

चेतावनी: इस पेज पर मौजूद एक या इससे ज़्यादा डेमो अब काम नहीं करते, क्योंकि Glitch ने होस्टिंग बंद कर दी है.

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

रिस्पॉन्सिव इमेज के बारे में खास जानकारी

Browser Support

• 73
• 79
• 78
• 17.2

Source

मान लें कि आप 300 पिक्सल चौड़ी स्क्रीन पर वेब ब्राउज़ कर रहे हैं और पेज 1500 पिक्सल चौड़ी इमेज का अनुरोध करता है. उस पेज ने आपके मोबाइल का काफ़ी डेटा खर्च कर दिया है, क्योंकि आपकी स्क्रीन उस अतिरिक्त रिज़ॉल्यूशन का इस्तेमाल नहीं कर सकती. आम तौर पर, ब्राउज़र इमेज का ऐसा वर्शन फ़ेच करता है जो आपकी स्क्रीन के साइज़ से थोड़ा ज़्यादा चौड़ा हो. उदाहरण के लिए, 325 पिक्सल. इससे डेटा खर्च किए बिना हाई रिज़ॉल्यूशन वाली इमेज मिलती है. साथ ही, इमेज तेज़ी से लोड होती है.

रिस्पॉन्सिव इमेज की मदद से, ब्राउज़र अलग-अलग डिवाइसों के लिए अलग-अलग इमेज रिसॉर्स फ़ेच कर सकते हैं. अगर इमेज सीडीएन का इस्तेमाल नहीं किया जाता है, तो हर इमेज के लिए कई डाइमेंशन सेव करें और उन्हें srcset एट्रिब्यूट में बताएं. w वैल्यू, ब्राउज़र को हर वर्शन की चौड़ाई बताती है, ताकि वह किसी भी डिवाइस के लिए सही वर्शन चुन सके:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

प्रीलोड की सुविधा के बारे में खास जानकारी

Browser Support

• 50
• 79
• 85
• 11.1

Source

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

<link rel="preload" as="image" href="important.png" fetchpriority="high">

अहम जानकारी: पहले से लोड की गई इमेज को ज़्यादा प्राथमिकता दी जाती है. इसलिए, उनमें fetchpriority="high" एट्रिब्यूट शामिल होना चाहिए. ऐसा न होने पर, पहले से लोड की गई इमेज को as एट्रिब्यूट के लिए डिफ़ॉल्ट प्राथमिकता मिलेगी. इमेज के लिए, यह डिफ़ॉल्ट रूप से low पर सेट होता है. इससे ब्राउज़र, इमेज के मुकाबले रेंडर-ब्लॉकिंग कॉन्टेंट को प्राथमिकता दे सकता है. ज़्यादा जानकारी के लिए, Fetch Priority API की मदद से, रिसॉर्स लोड होने की प्रोसेस को ऑप्टिमाइज़ करना लेख पढ़ें.

imagesrcset और imagesizes

<link> एलिमेंट, रिस्पॉन्सिव इमेज को पहले से लोड करने के लिए, imagesrcset और imagesizes एट्रिब्यूट का इस्तेमाल करता है. इन्हें <link rel="preload"> के साथ इस्तेमाल करें. साथ ही, <img> एलिमेंट में इस्तेमाल किए गए srcset और sizes सिंटैक्स का इस्तेमाल करें.

उदाहरण के लिए, अगर आपको रिस्पॉन्सिव इमेज को पहले से लोड करना है, तो:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

इसके लिए, अपने एचटीएमएल के <head> में यह जोड़ें:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

इससे, रिसॉर्स चुनने के उसी लॉजिक का इस्तेमाल करके अनुरोध शुरू होता है जिसका इस्तेमाल srcset और sizes करते हैं.

चेतावनी: हो सकता है कि एचटीटीपी हेडर प्रीलोड के लिए, रिस्पॉन्सिव इमेज काम न करें. ऐसा इसलिए, क्योंकि व्यूपोर्ट सिर्फ़ तब तय होता है, जब दस्तावेज़ बनाया जाता है. इसका मतलब है कि इन्हें 103 अर्ली हिंट में, पहले से लोड करने के लिए इस्तेमाल नहीं किया जा सकता.

Chrome जैसे कुछ ब्राउज़र, एचटीएमएल के पहले हिस्से को प्रोसेस करने और दस्तावेज़ तय होने के बाद, उन एट्रिब्यूट के साथ प्रीलोड को प्रोसेस करते हैं. इसे एचटीएमएल स्टैंडर्ड के लिए प्रस्तावित किया गया है. हालांकि, अगर व्यूपोर्ट को दस्तावेज़ में बाद में फिर से तय किया जाता है, तो यह अब भी जोखिम भरा हो सकता है. उदाहरण के लिए, देर से आने वाला <meta name="viewport"> एलिमेंट. ऐसा इसलिए, क्योंकि हो सकता है कि गलत रिस्पॉन्सिव इमेज पहले ही लोड होना शुरू हो गई हों.

किसी भी समस्या से बचने के लिए, हमारा सुझाव है कि रिस्पॉन्सिव इमेज के लिए, Link: <...>; rel="preload" एचटीटीपी रिस्पॉन्स हेडर के बजाय <link rel="preload" href="..."> एलिमेंट का इस्तेमाल करें.

उपयोग के उदाहरण

यहां रिस्पॉन्सिव इमेज को पहले से लोड करने के कुछ उदाहरण दिए गए हैं.

डाइनैमिक तरीके से इंजेक्ट की गई रिस्पॉन्सिव इमेज को पहले से लोड करें

मान लें कि स्लाइड शो के हिस्से के तौर पर, हीरो इमेज डाइनैमिक तरीके से लोड हो रही हैं और आपको पता है कि कौनसी इमेज पहले दिखेगी. ऐसे में, हो सकता है कि आपको वह इमेज जल्द से जल्द दिखानी हो और स्लाइड शो स्क्रिप्ट के लोड होने का इंतज़ार न करना हो.

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

1. इस स्लाइड शो डेमो को नए टैब में खोलें.
2. DevTools खोलने के लिए, Control+Shift+J (या Mac पर Command+Option+J) दबाएं.
3. नेटवर्क टैब पर क्लिक करें.
4. थ्रॉटलिंग ड्रॉप-डाउन सूची में, फ़ास्ट 3G चुनें.
5. कैश मेमोरी की सुविधा बंद करें चेकबॉक्स से सही का निशान हटाएं.
6. पेज को फिर से लोड करें.

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

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

पहली इमेज को पहले से लोड करने से, वह स्क्रिप्ट के साथ ही लोड होने लगती है.

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

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

image-set का इस्तेमाल करके, बैकग्राउंड की इमेज पहले से लोड करना

अगर आपके पास अलग-अलग स्क्रीन डेंसिटी के लिए अलग-अलग बैकग्राउंड इमेज हैं, तो उन्हें image-set सिंटैक्स के साथ अपनी सीएसएस में तय किया जा सकता है. इसके बाद, ब्राउज़र स्क्रीन के DPR के आधार पर, यह चुन सकता है कि कौनसा वर्शन दिखाना है.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

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

सीएसएस बैकग्राउंड इमेज के साथ समस्या यह है कि ब्राउज़र उन्हें पेज के <head> में मौजूद सभी सीएसएस को डाउनलोड और प्रोसेस करने के बाद ही खोजता है.

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

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

रिस्पॉन्सिव इमेज को पहले से लोड करने की सुविधा से, उन इमेज को तेज़ी से लोड किया जा सकता है.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

href एट्रिब्यूट को शामिल न करने से, यह पक्का किया जा सकता है कि जो ब्राउज़र <link> एलिमेंट पर imagesrcset के साथ काम नहीं करते, लेकिन सीएसएस में image-set के साथ काम करते हैं वे सही सोर्स डाउनलोड करें. हालांकि, इस मामले में उन्हें प्रीलोड का फ़ायदा नहीं मिलेगा.

रिस्पॉन्सिव बैकग्राउंड प्रीलोड डेमो में, पहले से लोड की गई रिस्पॉन्सिव बैकग्राउंड इमेज के साथ, पिछले उदाहरण के काम करने के तरीके की जांच की जा सकती है.

यहां इमेज और सीएसएस एक ही समय पर डाउनलोड होना शुरू हो जाते हैं. इससे इमेज तेज़ी से लोड होती है.

रिस्पॉन्सिव इमेज को पहले से लोड करने के फ़ायदे

रिस्पॉन्सिव इमेज को पहले से लोड करने से, उनकी स्पीड बढ़ सकती है. हालांकि, असल में ऐसा करने से क्या होता है?

इस सवाल का जवाब देने के लिए, मैंने डेमो पीडब्ल्यूए शॉप की दो कॉपी बनाईं: एक ऐसी कॉपी जो इमेज को पहले से लोड नहीं करती, और एक ऐसी कॉपी जो कुछ इमेज को पहले से लोड करती है. साइट, JavaScript का इस्तेमाल करके इमेज को लेज़ी लोड करती है. इसलिए, शुरुआती व्यूपोर्ट में दिखने वाली इमेज को पहले से लोड करने से फ़ायदा मिल सकता है.

इससे प्रीलोड न करने और इमेज प्रीलोड करने के लिए, ये नतीजे मिले:

• रेंडर शुरू होने में लगने वाले समय में कोई बदलाव नहीं हुआ.
• स्पीड इंडेक्स में थोड़ा सुधार हुआ (273 मि॰से॰, क्योंकि इमेज तेज़ी से लोड होती हैं और पिक्सल एरिया का ज़्यादा हिस्सा नहीं लेतीं).
• लास्ट पेंटेड हीरो में काफ़ी सुधार हुआ. इसमें 1.2 सेकंड की कमी आई.

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

पहले से लोड करना और <picture>

वेब परफ़ॉर्मेंस वर्किंग ग्रुप, srcset और sizes के लिए प्रीलोड के बराबर की सुविधा जोड़ने पर चर्चा कर रहा है. हालांकि, <picture> एलिमेंट के लिए नहीं, जो "आर्ट डायरेक्शन" के इस्तेमाल के उदाहरण को हैंडल करता है.

<picture> को पहले से लोड करने के लिए, अब भी कई तकनीकी समस्याएं हल करनी बाकी हैं. हालांकि, इस बीच कुछ अन्य तरीके अपनाए जा सकते हैं:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

<picture> एलिमेंट की इमेज के सोर्स को चुनने का लॉजिक, <source> एलिमेंट के media एट्रिब्यूट को क्रम से देखता है. इसके बाद, वह सबसे पहले मैच होने वाले एट्रिब्यूट को ढूंढता है और अटैच किए गए रिसॉर्स का इस्तेमाल करता है.

रिस्पॉन्सिव प्रीलोड में "क्रम" या "पहले मैच" का कोई कॉन्सेप्ट नहीं होता. इसलिए, आपको ब्रेकपॉइंट को कुछ इस तरह से ट्रांसलेट करना होगा:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

पहले से लोड करना और type

<picture> एलिमेंट, पहले type से मैच करने की सुविधा भी देता है. इससे आपको अलग-अलग इमेज फ़ॉर्मैट उपलब्ध कराने की सुविधा मिलती है, ताकि ब्राउज़र उस इमेज फ़ॉर्मैट को चुन सके जो सबसे पहले काम करता है.

यह इस्तेमाल का उदाहरण, प्रीलोड के साथ सिर्फ़ कुछ हद तक काम करता है: ब्राउज़र को सिर्फ़ उन टाइप के लिए प्रीलोड डाउनलोड करने चाहिए जो काम करते हैं. इसलिए, इसका इस्तेमाल करके ब्राउज़र को ऐसे माइम टाइप पहले से लोड करने से रोका जा सकता है जो काम नहीं करते. इसके लिए, पहले से लोड करने में यह शामिल करें:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

हालांकि, <picture> के उलट, यह काम करने वाले पहले टाइप पर नहीं रुकेगा. इसलिए, अगर अलग-अलग टाइप के लिए कई प्रीलोड शामिल किए जाते हैं, तो सभी इमेज पहले से लोड हो जाएंगी:

ऐसा न करें — कई तरह के विज्ञापन पहले से लोड करना:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

इसके बजाय, यह करें — सबसे पसंदीदा टाइप को पहले से लोड करें:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

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

जिन साइटों के एचटीएमएल में इमेज तुरंत मिल जाती है उनके लिए हमारा सुझाव है कि प्रीलोड करने से बचें. इसके बजाय, प्रीलोड स्कैनर को <picture> और <source> एलिमेंट से इमेज चुनने दें. यह सबसे सही तरीका है. खास तौर पर, सही इमेज को प्राथमिकता देने के लिए फ़ेच प्रायॉरिटी का इस्तेमाल करते समय. इससे ब्राउज़र के हिसाब से, सटीक इमेज को पहले से लोड किया जा सकता है. इससे, इमेज या पेजों में बदलाव होने पर, मुख्य मार्कअप से प्रीलोड के पुराना होने का जोखिम भी खत्म हो जाता है.

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर पड़ने वाले असर

इमेज, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) के लिए कैंडिडेट हो सकती हैं. इसलिए, उन्हें पहले से लोड करने से आपकी वेबसाइट का एलसीपी बेहतर हो सकता है.

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