HTML <तस्वीर> तत्व
HTML <picture>
तत्व आपको विभिन्न उपकरणों या स्क्रीन आकारों के लिए अलग-अलग चित्र प्रदर्शित करने की अनुमति देता है।
एचटीएमएल <चित्र> तत्व
HTML <picture>
तत्व वेब डेवलपर्स को छवि संसाधनों को निर्दिष्ट करने में अधिक लचीलापन देता है।
<picture>
तत्व में एक या अधिक तत्व होते हैं, प्रत्येक
विशेषता के माध्यम से विभिन्न छवियों का <source>
संदर्भ देता है। srcset
इस तरह ब्राउज़र उस छवि को चुन सकता है जो वर्तमान दृश्य और/या डिवाइस के लिए सबसे उपयुक्त हो।
प्रत्येक <source>
तत्व में एक
media
विशेषता होती है जो परिभाषित करती है कि छवि कब सबसे उपयुक्त है।
उदाहरण
विभिन्न स्क्रीन आकारों के लिए अलग-अलग चित्र दिखाएं:
<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>
तत्व के अंतिम चाइल्ड तत्व के रूप में हमेशा एक तत्व निर्दिष्ट करें <picture>
। तत्व का उपयोग उन ब्राउज़र द्वारा किया जाता है जो तत्व <img>
का समर्थन नहीं करते हैं <picture>
, या यदि कोई भी <source>
टैग मेल नहीं खाता है।
पिक्चर एलिमेंट का उपयोग कब करें
<picture>
तत्व के दो मुख्य उद्देश्य हैं :
1. बैंडविड्थ
यदि आपके पास एक छोटी स्क्रीन या डिवाइस है, तो बड़ी छवि फ़ाइल लोड करना आवश्यक नहीं है। ब्राउज़र पहले <source>
तत्व का उपयोग मिलान विशेषता मानों के साथ करेगा, और निम्न में से किसी भी तत्व को अनदेखा करेगा।
2. प्रारूप समर्थन
कुछ ब्राउज़र या उपकरण सभी छवि प्रारूपों का समर्थन नहीं कर सकते हैं। तत्व का उपयोग करके
<picture>
, आप सभी स्वरूपों की छवियां जोड़ सकते हैं, और ब्राउज़र पहले प्रारूप का उपयोग करेगा जिसे वह पहचानता है, और निम्न में से किसी भी तत्व को अनदेखा करता है।
उदाहरण
ब्राउज़र पहले छवि प्रारूप का उपयोग करेगा जिसे वह पहचानता है:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
नोट: ब्राउज़र <source>
मेल खाने वाले विशेषता मानों के साथ पहले तत्व का उपयोग करेगा, और निम्नलिखित <source>
तत्वों को अनदेखा करेगा।
एचटीएमएल छवि टैग
Tag | Description |
---|---|
<img> | Defines an image |
<map> | Defines an image map |
<area> | Defines a clickable area inside an image map |
<picture> | Defines a container for multiple image resources |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।