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

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

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

रेंडर शुरू करें का विकल्प पहले जैसा ही है.
स्पीड इंडेक्स काफ़ी हद तक बेहतर हुआ है (273 मिलीसेकंड, क्योंकि इमेज तेज़ी से लोड होती हैं और पिक्सल एरिया का ज़्यादा हिस्सा नहीं लेती हैं).
Last Painted Hero के लिए, लोड होने में लगने वाला समय 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)">
<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> एलिमेंट से इमेज लेने दें. यह सबसे सही तरीका है. खास तौर पर, सही इमेज को प्राथमिकता देने के लिए, फ़ेच करने की प्राथमिकता का इस्तेमाल करते समय.

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

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

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