रिस्पॉन्सिव इमेज पहले से लोड की जा सकती हैं. इससे आपकी इमेज बहुत तेज़ी से लोड हो सकती हैं. ऐसा करने से, img टैग को रेंडर करने से पहले, ब्राउज़र को srcset से सही इमेज की पहचान करने में मदद मिलती है.
रिस्पॉन्सिव इमेज के बारे में खास जानकारी
ब्राउज़र सहायता
- 73
- 79
- 78
- 78 जीबी में से
मान लीजिए कि आप किसी ऐसी स्क्रीन पर वेब ब्राउज़ कर रहे हैं जिसकी चौड़ाई 300 पिक्सल है और पेज 1500 पिक्सल चौड़ी इमेज के लिए अनुरोध करता है. वह पेज आपका बहुत सारा मोबाइल डेटा बर्बाद करता है क्योंकि आपकी स्क्रीन इस अतिरिक्त रिज़ॉल्यूशन के साथ कुछ भी नहीं कर पाती. आम तौर पर, ब्राउज़र ऐसी इमेज का वर्शन फ़ेच करेगा जो आपकी स्क्रीन के साइज़ से बहुत छोटा हो. उदाहरण के लिए, 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 करते हैं.
इस्तेमाल के उदाहरण
रिस्पॉन्सिव इमेज को पहले से लोड करने के लिए, इस्तेमाल के कुछ उदाहरण यहां दिए गए हैं.
डाइनैमिक रूप से इंजेक्ट की गई रिस्पॉन्सिव इमेज को पहले से लोड करें
मान लें कि हीरो इमेज को स्लाइड शो के हिस्से के तौर पर डाइनैमिक तौर पर लोड किया जा रहा है और आपको पता है कि सबसे पहले कौनसी इमेज दिखाई जाएगी. ऐसे मामले में, हो सकता है कि आप उस इमेज को जल्द से जल्द दिखाना चाहें. साथ ही, स्लाइड शो स्क्रिप्ट के लोड होने का इंतज़ार न करें.
आप डाइनैमिक रूप से लोड होने वाली इमेज गैलरी की मदद से, वेबसाइट पर इस समस्या की जांच कर सकते हैं:
- इस स्लाइड शो डेमो को एक नए टैब में खोलें.
- DevTools खोलने के लिए
Control+Shift+J(या Mac परCommand+Option+J) दबाएं. - नेटवर्क टैब पर क्लिक करें.
- Throttling ड्रॉप-डाउन सूची में, फ़ास्ट 3G चुनें.
- कैश मेमोरी बंद करें चेकबॉक्स को बंद करें.
- पेज को फिर से लोड करें.
यहां preload का इस्तेमाल करने से इमेज समय से पहले लोड होने लगती है, ताकि ब्राउज़र को ज़रूरत पड़ने पर इमेज दिखाई जा सके.
पेजों को पहले से लोड करने से क्या अंतर होता है, यह जानने के लिए डाइनैमिक तौर पर लोड होने वाली उसी इमेज गैलरी की जांच करें. हालांकि, पहले से लोड की गई पहली इमेज के साथ, ऊपर दिए गए उदाहरण में दिए गए निर्देशों का पालन करें.
इमेज-सेट का इस्तेमाल करके, बैकग्राउंड की इमेज पहले से लोड करें
अगर अलग-अलग स्क्रीन डेंसिटी के लिए आपके पास अलग-अलग बैकग्राउंड इमेज हैं, तो
image-set सिंटैक्स की मदद से उनकी जानकारी अपने सीएसएस में दें. इसके बाद, ब्राउज़र यह चुन सकता है कि स्क्रीन के डीपीआर के आधार पर किसे दिखाया जाए.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
सीएसएस के बैकग्राउंड वाली इमेज में समस्या यह है कि ब्राउज़र उन्हें तब ही खोजता है, जब पेज के <head> में मौजूद सभी सीएसएस को डाउनलोड और प्रोसेस कर लिया जाता है.
उदाहरण के तौर पर दी गई वेबसाइट पर इस समस्या की जांच की जा सकती है. इसके लिए, रिस्पॉन्सिव बैकग्राउंड इमेज का इस्तेमाल करें.
रिस्पॉन्सिव इमेज पहले से लोड करने की सुविधा की मदद से, उन इमेज को तेज़ी से लोड किया जा सकता है.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
href एट्रिब्यूट को शामिल न करने पर, यह पक्का किया जा सकता है कि जिन ब्राउज़र में <link> एलिमेंट पर imagesrcset काम नहीं करता, लेकिन सीएसएस में image-set काम नहीं करते वे सही सोर्स डाउनलोड करें. हालांकि, इस मामले में उन्हें पहले से लोड करने की सुविधा का फ़ायदा
नहीं मिलेगा.
रिस्पॉन्सिव बैकग्राउंड प्रीलोड डेमो में, यह जांच की जा सकती है कि पिछला उदाहरण, पहले से लोड की गई रिस्पॉन्सिव बैकग्राउंड इमेज के साथ कैसे काम करता है.
रिस्पॉन्सिव इमेज को पहले से लोड करने के असरदार असर
रिस्पॉन्सिव इमेज को पहले से लोड करने से, सैद्धांतिक तौर पर उनकी रफ़्तार अच्छी हो सकती है, लेकिन ऐसा करने से क्या फ़ायदा होता है?
इसका जवाब है कि मैंने डेमो PWA शॉप की दो कॉपी बनाई हैं: एक, जो इमेज को पहले से लोड नहीं करता और एक, जो उनमें से कुछ को पहले से लोड कर देती है. साइट लेज़ी, JavaScript का इस्तेमाल करके इमेज लोड करती है. इसलिए, शुरुआती व्यूपोर्ट में दिखने वाली इमेज को पहले से लोड करने से फ़ायदा हो सकता है.
इससे पेज को पहले से लोड नहीं करने और इमेज को पहले से लोड करने के लिए ये नतीजे मिले:
- इमेज बनाना शुरू करें कोई भी बदलाव नहीं किया गया है.
- स्पीड इंडेक्स में थोड़ा सुधार हुआ (273 मि॰से॰, क्योंकि इमेज तेज़ी से आ रही हैं. ऐसा इसलिए भी किया गया है, क्योंकि इमेज, पिक्सल एरिया का बहुत ज़्यादा हिस्सा नहीं लेती हैं).
- लास्ट पेंटेड हीरो में काफ़ी सुधार हुआ, यानी कि 1.2 सेकंड.
पहले से लोड करने की सुविधा और <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> एलिमेंट से इमेज पिक अप करें. यह सबसे सही तरीका है, खास तौर पर जब प्राथमिकता के संकेत का इस्तेमाल करके सही इमेज को प्राथमिकता दी जाती है.
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर असर
इमेज सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के लिए कैंडिडेट हो सकती हैं. इसलिए, उन्हें पहले से लोड करने से आपकी वेबसाइट की एलसीपी बेहतर हो सकती है.
भले ही, पहले से लोड की जा रही इमेज रिस्पॉन्सिव हो या नहीं, लेकिन जब इमेज रिसॉर्स को शुरुआती मार्कअप पेलोड में नहीं खोजा जा सकता, तब पहले से लोड की गई इमेज सबसे सही तरीके से काम करती है. आपके पास उन साइटों के एलसीपी में भी ज़्यादा सुधार होंगे जो सर्वर से पूरा मार्कअप भेजने वाली साइटों के मुकाबले, क्लाइंट साइड पर मार्कअप रेंडर करती हैं.