HTML <picture> Element

HTML <picture> element का उपयोग responsive images दिखाने के लिए किया जाता है।
यह browser को यह चुनने की सुविधा देता है कि device, screen size या resolution के हिसाब से कौन-सी image load करनी है।

<picture> Element क्या है

<picture> element multiple image sources provide करता है।
Browser conditions के आधार पर सबसे suitable image automatically select करता है।

इसका मुख्य उद्देश्य: Faster loading
Better performance
Responsive design

<picture> Element का Structure

<picture> element के अंदर ये tags होते हैं:

<picture>
<source>
<img>

<img> tag fallback के रूप में काम करता है।

Basic Syntax

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 500px)">
  <img src="image-small.jpg" alt="Sample Image">
</picture>

अगर browser कोई <source> match नहीं करता, तो <img> load होती है।

<source> Tag का Role

<source> tag condition और image source define करता है।

Important attributes: srcset
media
type

Example:

<source srcset="photo.webp" type="image/webp">

Screen Size के हिसाब से Image Load करना

<picture>
  <source srcset="desktop.jpg" media="(min-width: 1024px)">
  <source srcset="tablet.jpg" media="(min-width: 600px)">
  <img src="mobile.jpg" alt="Responsive Image">
</picture>

Desktop, tablet और mobile के लिए अलग-अलग images load होंगी।

Different Image Formats के लिए <picture>

Modern browsers को optimized formats दिए जा सकते हैं।

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Format Example">
</picture>

अगर browser WebP support करता है, तो वही load होगी।

<img> Tag क्यों जरूरी है

<img> tag fallback image होता है।
अगर browser <picture> या <source> support नहीं करता, तब <img> show होती है।

alt attribute हमेशा <img> में लिखा जाता है।

<picture> vs CSS Background Image

<picture> element: SEO friendly
Accessible
Content images के लिए best

CSS background image: Decorative purpose
Layout design के लिए

Content images के लिए <picture> prefer किया जाता है।

Responsive Performance Benefits

Mobile devices पर small image load होती है
Desktop पर high-resolution image
Bandwidth save होती है
Page speed improve होती है

Common Use Cases

Hero section images
Banner images
Product images
Gallery images
High-resolution photography

Common Mistakes

<img> tag remove कर देना
alt attribute न लिखना
Unnecessary large images use करना
Media queries गलत लिखना

Best Practices

Always fallback <img> रखें
Optimized image formats use करें
Clear media conditions लिखें
Meaningful alt text दें

Real World Example

<picture>
  <source srcset="banner-desktop.webp" media="(min-width: 1000px)">
  <source srcset="banner-mobile.webp" media="(max-width: 999px)">
  <img src="banner-mobile.jpg" alt="Website Banner">
</picture>

Summary

HTML <picture> element responsive images के लिए powerful tool है।
यह screen size और browser capability के अनुसार best image load करता है।
Performance, SEO और user experience को बेहतर बनाने के लिए इसका सही use जरूरी है।