HTML5 <picture>टैग आपको स्क्रीन की चौड़ाई के आधार पर सही छवि स्रोत को हल करने में मदद करेगा
जाहिरा तौर पर पिछले 5 वर्षों में ब्राउज़रों का व्यवहार बहुत अधिक नहीं बदला है और कई अभी भी छिपी हुई छवियों को डाउनलोड करेंगे, भले ही display: noneउन पर कोई संपत्ति सेट हो।
भले ही एक मीडिया क्वेरी वर्कअराउंड है, यह केवल तब उपयोगी हो सकता है जब छवि को सीएसएस में एक पृष्ठभूमि के रूप में सेट किया गया हो।
जब मैं सोच रहा था कि समस्या का सिर्फ एक जेएस समाधान ( आलसी लोड , पिक्चरफिल , आदि) है, तो यह दिखाई दिया कि एक अच्छा शुद्ध HTML समाधान है जो HTML5 के साथ बॉक्स से बाहर आता है।
और वह <picture>टैग है।
यहां बताया गया है कि MDN इसका वर्णन कैसे करता है:
एचटीएमएल <picture>तत्व कई निर्दिष्ट करने के लिए प्रयोग किया जाता है एक कंटेनर है <source>एक विशेष के लिए तत्वों <img>यह में निहित। ब्राउज़र पृष्ठ के वर्तमान लेआउट (छवि में दिखाई देने वाली बॉक्स की बाधाओं) के अनुसार सबसे उपयुक्त स्रोत का चयन करेगा और यह जिस डिवाइस पर प्रदर्शित होगा (उदाहरण के लिए एक सामान्य या hiDPI डिवाइस।)
और यहाँ इसका उपयोग कैसे करना है:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
पीछे तर्क
ब्राउज़र imgटैग के स्रोत को लोड करेगा , केवल अगर कोई भी मीडिया नियम लागू नहीं होता है। जब <picture>तत्व ब्राउज़र द्वारा समर्थित नहीं है, तो यह imgटैग दिखाने के लिए फिर से वापस आ जाएगा ।
आम तौर पर आप सबसे छोटी छवि के स्रोत के रूप में डालते हैं <img>और इस प्रकार बड़ी स्क्रीन के लिए भारी छवियों को लोड नहीं करते हैं। इसके विपरीत, यदि कोई मीडिया नियम लागू होता है, तो <img>वसीयत के स्रोत को डाउनलोड नहीं किया जाएगा, इसके बजाय यह संबंधित <source>टैग के url की सामग्री को डाउनलोड करेगा ।
यहां केवल नुकसान यह है कि यदि तत्व ब्राउज़र द्वारा समर्थित नहीं है, तो यह केवल छोटी छवि को लोड करेगा। दूसरी ओर 2017 में हमें मोबाइल के पहले दृष्टिकोण पर विचार करना और कोड करना चाहिए ।
और इससे पहले कि कोई बाहर निकल जाए, यहां के लिए वर्तमान ब्राउज़र समर्थन है <picture>:
डेस्कटॉप ब्राउज़र
मोबाइल ब्राउज़र
ब्राउज़र समर्थन के बारे में अधिक आप कैन आई का उपयोग कर सकते हैं ।
अच्छी बात यह है कि html5please का वाक्य इसे कमबैक के साथ उपयोग करना है । और मैं व्यक्तिगत रूप से उनकी सलाह लेने का इरादा रखता हूं।
टैग के बारे में अधिक आप W3C के विनिर्देश में पा सकते हैं । वहाँ एक अस्वीकरण है, जिसका उल्लेख करना मुझे महत्वपूर्ण लगता है:
pictureतत्व समान दिखने से कुछ अलग है videoऔर audioतत्वों। हालांकि उन सभी में sourceतत्व होते हैं, स्रोत तत्व की srcविशेषता का कोई अर्थ नहीं है जब तत्व एक pictureतत्व के भीतर निहित है, और संसाधन चयन एल्गोरिथ्म अलग है। साथ ही, pictureतत्व स्वयं कुछ भी प्रदर्शित नहीं करता है; यह केवल इसके निहित imgतत्व के लिए एक संदर्भ प्रदान करता है जो इसे कई URL से चुनने में सक्षम बनाता है।
तो यह क्या कहता है कि यह केवल छवि को लोड करते समय प्रदर्शन को बेहतर बनाने में मदद करता है, इसके लिए कुछ संदर्भ प्रदान करता है।
और छोटे उपकरणों पर छवि को छिपाने के लिए आप अभी भी कुछ CSS जादू का उपयोग कर सकते हैं:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
इस प्रकार ब्राउज़र वास्तविक छवि को प्रदर्शित नहीं करेगा और केवल 1x1पिक्सेल छवि डाउनलोड करेगा (जिसे यदि आप एक से अधिक बार उपयोग करते हैं तो कैश किया जा सकता है)। हालांकि, अवगत रहें, कि यदि <picture>टैग ब्राउज़र द्वारा समर्थित नहीं है, तो भी डेसकॉप स्क्रीन पर वास्तविक छवि प्रदर्शित नहीं होगी (इसलिए आपको निश्चित रूप से वहां पॉलीफिल बैकअप की आवश्यकता होगी)।
