HTML Picture Element In Hindi | Mayank Salvi

HTML element आपको विभिन्न devices या screen sizes के लिए अलग-अलग pictures display करने के लिए allow करता है।
Mayank Salvi

HTML <picture> Element

HTML <picture> element आपको विभिन्न devices या screen sizes के लिए अलग-अलग pictures display करने के लिए allow करता है।

The HTML <picture> Element

HTML <picture> element web developers को image resources को specify करने में अधिक flexibility देता है।

<picture> element में एक या एक से अधिक <source> elements शामिल होते हैं, प्रत्येक <source> element srcset attribute  के माध्‍यम से different images को refer करता है । इस तरह browser उस image को चुन सकता है जो वर्तमान view और/या device के लिए सबसे उपयुक्त हो।

प्रत्येक <source> element में एक media attribute होती है जो define करती है कि image कब suitable है।

Example

विभिन्न screen sizes के लिए different images दिखाएं:


<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>
Copy Code

 

Note: <picture> element के अंतिम child element के रूप में हमेशा एक <img> element specify करें। <img> element browsers द्वारा use किया जाता है वे <picture> element support नहीं करते अगर कोई <source> tag नहीं मिलता।

When to use the Picture Element

<picture> element के दो मुख्य उद्देश्य हैं :

1. Bandwidth

यदि आपके पास एक small screen या device है, तो large image file load करना आवश्यक नहीं है। browser पहले <source> element का उपयोग matching attribute values के साथ करेगा , और बाकी किसी भी element को ignore करेगा।

2. Format Support

कुछ browsers या devices सभी image formats का support नहीं कर सकते। <picture> element का उपयोग करके , आप सभी formats की images जोड़ सकते हैं, और browser पहले recognizes format का उपयोग करेगा, और बाकी element को ignore करेगा।

Example

browser पहले recognizes format का उपयोग करेगा:


<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Copy Code

Note: browser पहले <source> element का उपयोग matching attribute values के साथ करेगा , और बाकी <source> elements को ignore करेगा ।

HTML Image Tags

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

Also Read: 

Complete HTML Series In Hindi:  Click Here