Get Started 🚀
← Back to Images Chapter
Image Types

🧠 Picture Element — Smart Image Loading

<picture><source ...><img ...></picture>

<picture> element se conditions ke basis pe alag images serve kar sakte ho — screen size, format support, ya resolution. Jaise smart waiter jo bachhon ke liye chhota portion aur adults ke liye bada portion serve karta hai.

Isme <source> tags hote hain conditions ke saath aur ek <img> fallback. Browser har source ko upar se neeche check karta hai — pehla jo match kare use karta hai. Koi na kare toh use hota hai.

🛺
Hyderabad Analogy: Picture element jaise Paradise ka menu — alag sections alag needs ke liye. "Non-veg ke liye mutton, veg ke liye paneer, bachhon ke liye small portion." Browser apne liye jo kaam kare woh pick karta hai.

Code Example

HTML — Picture Element — Smart Image Loading
<!-- Format fallback: WebP → JPG -->
<picture>
  <source srcset="biryani.webp" type="image/webp">
  <img src="biryani.jpg" alt="Hyderabadi Biryani" width="600" height="400">
</picture>

<!-- Responsive: alag screens ke liye alag size -->
<picture>
  <source media="(min-width: 800px)" srcset="biryani-large.jpg">
  <source media="(min-width: 400px)" srcset="biryani-medium.jpg">
  <img src="biryani-small.jpg" alt="Hyderabadi Biryani" width="400" height="300">
</picture>

<!-- Art direction: mobile vs desktop ke liye alag crop -->
<picture>
  <source media="(max-width: 600px)" srcset="charminar-close.jpg">
  <source media="(min-width: 601px)" srcset="charminar-wide.jpg">
  <img src="charminar-wide.jpg" alt="Charminar" width="800" height="500">
</picture>
<source type="..."Format condition — agar browser support kare toh WebP serve karo
<source media="..."Screen size condition — alag screens ke liye alag image
srcset="..."Is condition ki image source
<img> fallbackHamesha zaroori — jab koi source match na kare

✅ When to Use

  • Jab WebP JPG fallback ke saath serve karna ho
  • Jab mobile ko desktop se alag image crop chahiye (art direction)
  • Jab alag screen sizes ko alag image resolutions chahiye

❌ When NOT to Use

  • Jab same image sab screens pe kaam karti ho (sirf <img> use karo srcset ke saath)
  • Jab sirf resize karna ho (CSS ya <img> pe srcset use karo)
💡
Sabse common use: WebP format fallback. Sirf 3 lines aur supporting browsers mein images 30% chhoti zero risk ke saath. Har production site mein yeh pattern hona chahiye.
← Back to Images Chapter