Responsive Images with picture and srcset
Serve the right image for the right screen, saving bandwidth and sharpening detail.
A single <img> sends the same file to a 4K monitor and a budget phone. That wastes data and can look blurry or oversized. Modern HTML gives you two tools to fix it.
srcset + sizes: same image, different resolutions
Use srcset to list versions of the same picture at different widths, and sizes to tell the browser how much space the image will occupy. The browser then picks the smallest file that still looks crisp.
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A harbor at sunset"><picture>: genuinely different images or formats
When you want to swap the actual art (a tight crop on mobile, a wide shot on desktop) or offer a modern format like AVIF with a JPEG fallback, wrap <source> elements in a <picture>. The browser walks the sources top to bottom and uses the first match, falling back to the plain <img>.
Example
When to use it
- A media site uses srcset and sizes to serve 400 px thumbnails on phones and 1200 px images on desktop, cutting data use on mobile.
- A marketing page uses <picture> with an art-direction crop: a portrait on mobile and a landscape on desktop.
- A developer uses <picture> to serve AVIF to Chrome, WebP to Safari, and JPEG as universal fallback.
More examples
srcset with width descriptors and sizes
srcset lists image widths; sizes tells the browser which CSS width the image will occupy at each breakpoint.
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1600.jpg 1600w"
sizes="(max-width: 480px) 400px,
(max-width: 960px) 800px,
1600px"
alt="Course hero image"
width="1600" height="900"
>Art direction with picture element
<source media="..."> switches image crops at specific breakpoints for art-direction responsive design.
<picture>
<source media="(min-width: 800px)"
srcset="hero-landscape.jpg">
<source media="(min-width: 480px)"
srcset="hero-portrait.jpg">
<img src="hero-square.jpg"
alt="Course promotion graphic"
width="600" height="600">
</picture>Next-gen format with JPEG fallback
The browser picks the first supported format; decoding="async" prevents the image from blocking the main thread.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg"
alt="Mountain landscape"
width="1200" height="800"
loading="lazy"
decoding="async">
</picture>
Discussion