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

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

Barry Pollard

Yoav Weiss

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

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

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

`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) दबाएं.
नेटवर्क टैब पर क्लिक करें.
थ्रॉटलिंग ड्रॉप-डाउन सूची में, Fast 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 मि॰से॰). ऐसा इसलिए हुआ, क्योंकि इमेज तेज़ी से लोड हो रही हैं और पिक्सल एरिया का ज़्यादा हिस्सा नहीं ले रही हैं.
लास्ट पेंटेड हीरो में 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> एलिमेंट से इमेज चुनने दें. यह सबसे सही तरीका है. खास तौर पर, जब सही इमेज को प्राथमिकता देने के लिए फ़ेच प्राथमिकता का इस्तेमाल किया जा रहा हो.

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

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

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