Intermediate LevelHTML & Semantic Web
How do srcset, sizes, and <picture> implement responsive images?
❓ Interview Prompt: Explain srcset pixel density / width descriptors, sizes media queries, and <picture> format switching (AVIF/WebP).
HTML5 provides two mechanisms for responsive images:
1. 'srcset' & 'sizes' on '<img>':
Allows the browser to automatically select the optimal image file resolution based on device screen pixel density (DPR) and viewport width.
2. '<picture>' with '<source>':
Used for Art Direction (switching image aspect ratios between mobile and desktop) and Format Switching (serving next-gen AVIF/WebP images to supporting browsers with PNG fallback).
Code Implementation Example
html
<!-- Art direction and format switching with <picture> -->
<picture>
<source srcset="hero-desktop.avif" type="image/avif" media="(min-width: 800px)">
<source srcset="hero-mobile.webp" type="image/webp">
<img src="hero-fallback.jpg" alt="Hero Banner" loading="lazy">
</picture>💡Responsive image format switching and art direction using picture and source tags.
🎯 Interview Key Takeaway
Use srcset/sizes on img for resolution switching, and <picture> for art direction and AVIF/WebP format switching.
#picture#srcset#Responsive Images#Performance#Intermediate
Back to all HTML & Semantic Web Questions→