HTML Picture Element
In this page:
<picture>
<source media="(min-width: width)" srcset="image-large.jpg">
<img src="image-default.jpg" alt="Description">
</picture>picture कंटेनर
picture टैग एक रिस्पॉन्सिव इमेज कंटेनर है जिसमें कई source टैग्स और एक सिंगल img टैग fallback होता है। ब्राउज़र हर source टैग के मीडिया नियमों का मूल्यांकन करता है, और सिर्फ पहली मैचिंग इमेज फाइल को लोड और डिस्प्ले करता है।
- पुराने ब्राउज़र्स के लिए fallback के रूप में अपने picture एलिमेंट के अंदर हमेशा एक स्टैंडर्ड img टैग शामिल करें।
- Accepted attributes:
- source srcset — image URL(s)
- source media — media query
- source type — MIME type such as image/webp | image/avif
- source sizes — sizes list
- img src / alt — required fallback
उदाहरण: The picture Container
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A photo">
</picture>रिस्पॉन्सिव Art Direction
Art direction का मतलब है अलग-अलग स्क्रीन लेआउट शेप्स को फिट करने के लिए अलग-अलग इमेज कंपोज़िशन्स (जैसे square crops या अलग-अलग orientations) सर्व करना। यह आप source टैग्स के media एट्रिब्यूट्स के अंदर रिस्पॉन्सिव मीडिया क्वेरीज़ सेट करके करते हैं।
- अपनी इलस्ट्रेशन के मुख्य डिटेल्स पर ध्यान केंद्रित करने के लिए मोबाइल डिवाइसेज़ पर square-cropped इमेजेज़ का उपयोग करें।
- Accepted attributes:
- source media — e.g. (min-width: 800px)
- source srcset — image URL(s)
- img src / alt — fallback
उदाहरण: Responsive Art Direction
<picture>
<source media="(max-width: 600px)" srcset="photo-square.jpg">
<img src="photo-wide.jpg" alt="A photo">
</picture>मॉडर्न इमेज फॉर्मैट्स सर्व करना
मॉडर्न इमेज फॉर्मैट्स (जैसे WebP या AVIF) पुराने JPEGs या PNGs की तुलना में कहीं बेहतर कंप्रेशन देते हैं, जिससे फाइल साइज़ छोटी और लोड स्पीड तेज़ बनी रहती है।
अपने source टैग्स के अंदर फॉर्मैट टाइप्स बताकर, आप मॉडर्न ब्राउज़र्स को WebP फाइल्स सर्व कर सकते हैं जबकि पुराने सिस्टम्स के लिए स्टैंडर्ड JPEGs पर फॉलबैक कर सकते हैं।
- अपने source टैग्स के type एट्रिब्यूट के अंदर हमेशा अपनी इमेज फॉर्मैट्स की mime-type बताएँ।
- Accepted attributes:
- source type — image/avif | image/webp | image/jpeg | image/png | image/svg+xml
- source srcset — image URL(s)
- img src / alt — fallback
उदाहरण: Serving Modern Image Formats
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A photo">
</picture>नेटवर्क बैंडविड्थ ऑप्टिमाइज़ करना
अगर आपकी साइट मोबाइल स्क्रीन्स पर बड़ी widescreen इमेजेज़ लोड करती है, तो आप यूज़र का डेटा बर्बाद कर रहे हैं और अपनी लोड स्पीड धीमी कर रहे हैं।
picture टैग यह सुनिश्चित करके redundant डाउनलोड्स रोकता है कि ब्राउज़र सिर्फ एक मैचिंग source फाइल ही डाउनलोड करे, बाकी विकल्पों को इग्नोर करते हुए।
उदाहरण: Optimizing Network Bandwidth
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(min-width: 601px)" srcset="large.jpg">
<img src="large.jpg" alt="A photo">
</picture>picture पर Accessibility
चूंकि ब्राउज़र source टैग्स का उपयोग सिर्फ यह चुनने के लिए करता है कि कौन-सी फाइल पाथ लोड करनी है, असली इमेज रेंडरिंग नेस्टेड img टैग द्वारा हैंडल होती है। इसका मतलब है कि आपको अपने alt text विवरण उसी fallback img टैग के अंदर सीधे लिखने चाहिए।
उदाहरण: Accessibility on picture
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A red bicycle leaning against a wall">
</picture>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: