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

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

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

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

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

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 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

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

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

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

imagesrcset और imagesizes

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

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

 <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 करते हैं.

इस्तेमाल के उदाहरण

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

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

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

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

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

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

Chrome DevTools के नेटवर्क पैनल में, वॉटरफ़ॉल दिख रहा है. इसमें कुछ JavaScript के साथ-साथ JPEG रिसॉर्स भी डाउनलोड हो रहा है.
पहली इमेज को पहले से लोड करने से, वह स्क्रिप्ट के साथ ही लोड होनी शुरू हो जाती है.

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

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

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

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

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

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

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

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

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

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

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

Chrome DevTools के नेटवर्क पैनल में, वॉटरफ़ॉल दिख रहा है. इसमें कुछ सीएसएस के साथ-साथ JPEG संसाधन भी डाउनलोड हो रहा है.
यहां इमेज और सीएसएस, दोनों एक साथ डाउनलोड होनी शुरू होती हैं. इससे इमेज तेज़ी से लोड होती है.

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

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

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

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

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

पहले से लोड करने की सुविधा और <picture>

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

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

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

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

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

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