सबसे तेज़ ब्राउज़र इमेज लोड कैसे प्राप्त करें

चित्र तत्व का उपयोग ब्राउज़र को एक सूची के बीच से डाउनलोड करने और प्रदर्शित करने के लिए एकल इष्टतम छवि का चयन करने की अनुमति देता है जो विभिन्न फ़ाइल प्रकारों और आकारों से बना हो सकता है। चित्र तत्व के लिए उपलब्ध व्यापक समर्थन हमें ब्राउज़र अज्ञेयवादी उत्तरदायी छवि प्रदर्शन पृष्ठों को आसानी से बनाने की अनुमति देता है

यहाँ प्रस्तुत विशिष्ट उदाहरण एक वेब कॉमिक पुस्तक है जो काफी छवि गहन है। उदाहरण चित्र तत्व का उपयोग तीन लोकप्रिय फ़ाइल प्रकारों में से चयन प्रदान करने के लिए करता है, जो AVIF , WEBP , और JPG छवि प्रारूप हैं। इनमें से प्रत्येक फ़ाइल प्रकार पाँच आयामों की श्रेणी में प्रस्तुत किया गया है, इस प्रकार ब्राउज़र को पंद्रह अलग-अलग छवियों में से एक विकल्प देता है। ब्राउजर छवियों की सूची में पहली प्रविष्टि का चयन करेगा जो स्वीकार्यता के अपने निर्धारण को संतुष्ट करती है।

यह स्क्रीन डेमो उदाहरण छवियों में से एक के लिए चित्र तत्व <चित्र> कोड दिखाती है। हमारे डेमो में प्रत्येक चित्र तत्व के बाद एक रिक्त रेखा विभाजक होता है जैसा कि यहाँ दिखाया गया है।

चित्र तत्व के अंदर स्रोत तत्वों की एक सूची है, जिनमें से प्रत्येक ब्राउज़र के चयन के लिए छवि के संभावित विकल्प को दर्शाता है। स्रोत तत्व एक शून्य तत्व है, जिसका अर्थ है कि इसमें समापन टैग नहीं है, कोई </स्रोत> टैग नहीं है। इसके बजाय स्रोत तत्व srcset विशेषता की सामग्री, एक छवि फ़ाइल नाम द्वारा पहचाने गए संसाधन के लिए लिंक प्रदान करने के लिए और अधिक कार्य करता है।

हमारे उदाहरण में प्रत्येक स्रोत तत्व में दो अतिरिक्त विशेषताएँ भी होती हैं। एक विशेषता को मीडिया लेबल किया गया है और इसकी सामग्री व्यूपोर्ट आयामों के लिए एक मीडिया क्वेरी का प्रतिनिधित्व करती है जो कि srcset निर्दिष्ट छवि के लिए सबसे उपयुक्त है। दूसरी विशेषता लेबल प्रकार है और इसकी सामग्री srcset छवि के MIME प्रकार का प्रतिनिधित्व करती है। यदि कोई ब्राउज़र किसी विशेष MIME प्रकार का समर्थन नहीं करता है, तो उस स्रोत आइटम को अनदेखा कर दिया जाएगा। उदाहरण के लिए, इस समय Microsoft एज ब्राउज़र AVIF MIME प्रकार का समर्थन नहीं करता है और वह ब्राउज़र केवल AVIF फ़ाइल विकल्पों की उपेक्षा करता है।

चित्र तत्व की सामग्री में अंतिम प्रविष्टि एक img तत्व है जिसे नाममात्र रूप से फ़ॉलबैक तत्व के रूप में नामित किया गया है यदि सूचीबद्ध स्रोत छवियों में से कोई भी स्वीकार्य नहीं है। छवि फ़ाइल के लिए src विशेषता सूचक के अलावा इस img तत्व में छवि के लिए वैकल्पिक पाठ के लिए एक alt विशेषता और एक tabindex विशेषता है जो उपयोगकर्ता को TAB कुंजी का उपयोग करके छवियों के बीच आसानी से नेविगेट करने की अनुमति देती है।

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

• ब्रेकप्वाइंट नाम एक्स- छोटा छोटा मध्यम बड़ा एक्स- बड़ा XX- बड़ा
• ब्रेकप्वाइंट <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
• कंटेनर 100% 540px 720px 960px 1140px 1320px
• छवि आकार 576px 768px 992px 1200px 1400px

लेकिन लोड किए गए एचटीएमएल की क्रोम डिबग स्क्रीन ऊपर दिखाए गए आईएमजी तत्व के स्रोत कोड और ब्राउजर को क्या मिलता है, जो यहां दिखाया गया है, के बीच कुछ अंतर दिखाता है।

जब ब्राउज़र स्रोतों की सूची को स्कैन करता है और एक का चयन करता है तो यह सबसे अच्छा लगता है कि यह इस डीबग कैप्चर में दिखाए गए चर this.currentSrc को उस srcset मान को असाइन करेगा।

ध्यान दें कि यह चित्र वही है जिसे ब्राउज़र ने ऑफ़र की गई सूची में से चुना है, यही वह चित्र है जिसे ब्राउज़र सबसे अच्छा समझता है। यह देखते हुए कि छवि के पास व्यूपोर्ट आकारों की एक श्रृंखला को कवर करने के लिए एक निश्चित आयाम है, यह संभव है कि छवि एकदम सही फिट न हो और कुछ समायोजन लाभ का हो सकता है। उदाहरण डेमो ब्राउज़र द्वारा चुनी गई छवि को व्यूपोर्ट आयामों में स्केल करने के लिए जावास्क्रिप्ट का उपयोग करता है और ये मान, यानी व्यूपोर्ट आयामों के लिए स्केल किए गए छवि आयाम, यहां दिखाए गए अनुसार सहेजे जाते हैं। जावास्क्रिप्ट से हमें कुछ अन्य उपयोग मिलते हैं

इस डेस्कटॉप कंप्यूटर पर क्रोम डीबगर का कहना है कि डेमो कॉमिक, 42 छवियां, 56 अनुरोधों और 2.1 एमबी ट्रांसफर के साथ 2.5 एमबी संसाधनों का उपभोग करती हैं, और 1.22 सेकेंड में खत्म होती हैं। आप डेमो कॉमिक को Hyenas2 पर देख सकते हैं। कॉमिक उत्पन्न करने वाले ऐप के लिए कोडबेस की एक बूंद के लिए मेरे गिटहब रेपो पर नजर रखें। और आप मेरे कॉमिक्स पेज पर और कॉमिक्स पा सकते हैं।

हमेशा की तरह टिप्पणियों, आलोचनाओं और सुझावों का स्वागत है