HTML <चित्र> तत्व
HTML <चित्र> तत्व आपको विभिन्न उपकरणों या स्क्रीन आकारों के लिए अलग-अलग छवियां प्रदर्शित करने की अनुमति देता है।
HTML <चित्र> तत्व
HTML <चित्र> तत्व वेब डेवलपर्स को छवि संसाधनों को निर्दिष्ट करने में अधिक लचीलापन देता है।
<चित्र> तत्व में एक या अधिक <स्रोत> तत्व होते हैं, प्रत्येक srcset विशेषता के माध्यम से एक अलग छवि का प्रतिनिधित्व करते हैं। इस तरह ब्राउज़र उस छवि का चयन कर सकता है जो वर्तमान दृश्य और/या डिवाइस से सबसे अच्छी तरह मेल खाती है।
प्रत्येक <स्रोत> तत्व में एक मीडिया विशेषता होती है जो परिभाषित करती है कि कोई छवि सबसे उपयुक्त कब है।
उदाहरण
विभिन्न स्क्रीन आकारों के लिए अलग-अलग छवियाँ प्रदर्शित करें:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>नोट:
<चित्र> तत्व में हमेशा एक <img> तत्व को अंतिम चाइल्ड तत्व के रूप में निर्दिष्ट करें। <img> तत्व का उपयोग उन ब्राउज़रों के लिए किया जाता है जो <चित्र> तत्व का समर्थन नहीं करते हैं, या उन छवियों के लिए जहां कोई <स्रोत> टैग मेल नहीं खाता है।
जब <चित्र> तत्व का उपयोग किया जाता है
<चित्र> तत्व के दो महत्वपूर्ण उद्देश्य हैं:
1. बैंडविड्थ
यदि आपके पास छोटी स्क्रीन या डिवाइस है, तो बड़ी छवि फ़ाइल अपलोड करना आवश्यक नहीं है। ब्राउज़र पहले <स्रोत> तत्व का उपयोग मिलान विशेषता मानों के साथ करेगा और बाद के किसी भी तत्व को अनदेखा कर देगा।
2. प्रारूप समर्थन
कुछ ब्राउज़र या डिवाइस सभी छवि प्रारूपों का समर्थन नहीं कर सकते हैं। <चित्र> तत्व का उपयोग करके, आप सभी आकृतियों की छवियां जोड़ सकते हैं, और ब्राउज़र पहले पहचाने गए आकार का उपयोग करेगा, और बाद के किसी भी तत्व को अनदेखा कर देगा।
उदाहरण
ब्राउज़र पहले छवि प्रारूप का उपयोग करेगा जिसे वह पहचानता है:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>नोट:
ब्राउज़र पहले <स्रोत> तत्व का उपयोग मिलान विशेषता मानों के साथ करेगा और बाद के <स्रोत> तत्वों को अनदेखा करेगा।
अभ्यास
इनमें से कौन सा तत्व एक कानूनी HTML तत्व नहीं है?
HTML छवि टैग
| टैग | व्याख्या |
|---|---|
| <img> | एक छवि को परिभाषित करता है |
| <map> | एक छवि मानचित्र को परिभाषित करता है |
| <area> | छवि मानचित्र के भीतर क्लिक करने योग्य भाग को परिभाषित करता है |
| <picture> | एकाधिक छवि संसाधनों के लिए एक कंटेनर को परिभाषित करता है |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।