इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Barry Pollard

Yoav Weiss

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

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

Browser Support

Source

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

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

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

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

Browser Support

Source

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

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

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

`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 अर्ली हिंट को प्रीलोड करने के लिए नहीं किया जा सकता. साथ ही, एचटीएमएल स्पेसिफ़िकेशन में बताया गया है कि "अर्ली हिंट प्रोसेसिंग के तहत, सिर्फ़ as, crossorigin, integrity, और type एट्रिब्यूट को हैंडल किया जाता है. अन्य कार्रवाइयां, जैसे कि ब्लॉक करना, imagesrcset, imagesizes, और media सिर्फ़ तब लागू होती हैं, जब कोई दस्तावेज़ बना लिया जाता है.".

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

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

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

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

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

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

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

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

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

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

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

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

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

इससे प्रीलोड नहीं किया गया और इमेज प्रीलोड की गई के लिए ये नतीजे मिले:

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

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

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

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

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

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

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

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