Advanced Images
<picture> multiple <source> elements deta hai, browser condition (screen size, format support) dekh kar sabse best wala choose karta hai — art direction (alag crops for mobile/desktop) aur format fallbacks (WebP with JPG fallback) dono ke liye use hota hai.
loading="lazy" attribute images ko lazy-load karta hai — sirf tab load hoti hain jab user scroll karke unke kareeb pahunchta hai, initial page load fast banata hai (especially bahut saari images wale pages par).
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.jpg" type="image/jpeg">
<img src="photo.jpg" alt="Fallback photo">
</picture>
<!-- Lazy loading — simple, native: -->
<img src="photo.jpg" alt="Photo" loading="lazy">
<!-- figure/figcaption — captioned image: -->
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Fig 1: 2026 Sales Growth</figcaption>
</figure>- picture+source = format/screen-size ke hisaab se best image choose
- loading="lazy" = native lazy loading, performance boost
- figure+figcaption = captioned images
srcset ka ek use-case high-resolution (Retina) screens ke liye sharper images serve karna hai — 1x, 2x density descriptors se browser sahi resolution choose karta hai device ke hisaab se.
<img src="photo.jpg"
srcset="photo.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
alt="High-res photo">
<!-- Normal screen: photo.jpg
Retina/high-DPI screen: photo-2x.jpg ya photo-3x.jpg automatically -->Jab image ka aspect ratio container se match nahi karta, CSS object-fit property control karta hai kaise fit ho — cover (crop karke fill), contain (poori image dikhao, letterboxing ke saath).
<style>
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover; /* image crop hoga, container fill hoga */
}
</style>
<img src="photo.jpg" alt="Thumbnail" class="thumbnail">