Responsive images let the browser pick the best image for the device — saving bandwidth on phones and serving sharp images on high-DPI screens.
srcset + sizes — same image, different resolutions
html
Responsive images let the browser pick the best image for the device — saving bandwidth on phones and serving sharp images on high-DPI screens.
srcset lists candidate images with their intrinsic widths (400w = 400px wide).sizes tells the browser how wide the image will be displayed at different breakpoints (here: full viewport width below 600px, else half).sizes + the device's pixel density to choose the smallest image that still looks sharp — before downloading anything.A phone might pick small.jpg; a Retina laptop showing it at 50% width might pick large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
The browser uses the first <source> it supports/matches. Use <picture> when you need different formats (serve AVIF/WebP with a JPEG fallback) or a different crop per screen size (art direction) — things srcset alone can't do.
srcset + sizes.<picture>.Serving right-sized, modern-format images is one of the biggest performance wins for the web — it cuts mobile data usage dramatically and improves Largest Contentful Paint.
These native tools let the browser make the optimal choice automatically, with graceful fallbacks for older browsers.