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

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

Barry Pollard

Yoav Weiss

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

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

ब्राउज़र सहायता

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

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

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

प्रीलोड की खास जानकारी

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

`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">

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

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

इसका मतलब यह भी है कि इनका इस्तेमाल 103 रिडायरेक्ट के लिए प्रीलोड करने के लिए नहीं किया जा सकता. साथ ही, एचटीएमएल स्पेसिफ़िकेशन में बताया गया है कि "रिडायरेक्ट के लिए प्रीलोड करने की प्रोसेस के तहत, सिर्फ़ as, crossorigin, integrity, और type एट्रिब्यूट को मैनेज किया जाता है. अन्य विकल्प, खास तौर पर ब्लॉक करने की सुविधा, imagesrcset, imagesizes, और media, सिर्फ़ दस्तावेज़ बनाने के बाद लागू होते हैं.".

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

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

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

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

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

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

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

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

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

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

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

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

अगर आपके पास अलग-अलग स्क्रीन डेंसिटी के लिए अलग-अलग बैकग्राउंड इमेज हैं, तो 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">

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

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

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

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

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

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

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

रेंडर शुरू करें का नाम पहले जैसा ही है.
स्पीड इंडेक्स की परफ़ॉर्मेंस में थोड़ा सुधार हुआ है. इमेज के तेज़ी से आने की वजह से, यह पिक्सल एरिया का ज़्यादा हिस्सा नहीं लेता.
Last Painted Hero के लोड होने में 1.2 सेकंड की काफ़ी कमी आई.

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

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

Web Performance Working Group, 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)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

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

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

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

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

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

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