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

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

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

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

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

  • Chrome: 73. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 78. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17.2. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

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

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

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

  • Chrome: 50. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: ≤79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 85. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 11.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

imagesrcset और imagesizes

<link> एलिमेंट, imagesrcset और imagesizes एट्रिब्यूट का इस्तेमाल इन कामों के लिए करता है रिस्पॉन्सिव इमेज को पहले से लोड करें. उनका इस्तेमाल साथ में करें <link rel="preload"> में, srcset और sizes सिंटैक्स का इस्तेमाल किया गया है <img> एलिमेंट.

उदाहरण के लिए, अगर आपको कोई रिस्पॉन्सिव इमेज पहले से लोड करनी है, तो इसके साथ-साथ:

 <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 इस्तेमाल करते हैं.

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

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

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

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

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

  1. यह स्लाइड शो डेमो खोलें क्लिक करें.
  2. DevTools खोलने के लिए, Control+Shift+J या Mac पर Command+Option+J दबाएं.
  3. नेटवर्क टैब पर क्लिक करें.
  4. थ्रॉटलिंग ड्रॉप-डाउन सूची में से, फ़ास्ट 3G चुनें.
  5. कैश मेमोरी बंद करें चेकबॉक्स को बंद करें.
  6. पेज को फिर से लोड करें.
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 संसाधन डाउनलोड करते हुए एक वॉटरफ़ॉल दिखाया गया है.
यहां इमेज और सीएसएस एक साथ डाउनलोड होती हैं. इससे इमेज तेज़ी से लोड होती है.

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

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

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

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

पहले से लोड की गई इमेज के 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> एलिमेंट का इमेज सोर्स चुनने का लॉजिक, media के ऊपर लागू होता है <source> एलिमेंट के एट्रिब्यूट को क्रम में सेट करता है, तो उस पहले एलिमेंट का पता लगाता है जो मेल खाता है और अटैच किए गए संसाधन का इस्तेमाल करता है.

क्योंकि रिस्पॉन्सिव प्रीलोड में "ऑर्डर" जैसी कोई जानकारी नहीं होती या "पहला मिलान" है, तो आपको ब्रेकपॉइंट का कुछ इस तरह में अनुवाद करना होगा:

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

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

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

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