Responsive Images
A 2000-pixel-wide image looks great on a desktop monitor but wastes bandwidth on a phone displaying it at 400 pixels. Responsive images solve this by letting browsers choose the most appropriate image version for each device.
The Problem
Without responsive images, you face a tradeoff: serve large images that look sharp everywhere but load slowly on mobile, or serve small images that load fast but look blurry on high-resolution displays.
Modern HTML provides tools to serve different images based on screen size, pixel density, and even artistic requirements.
srcset for Resolution Switching
The srcset attribute lists image versions at different widths:
<img
src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="A mountain landscape"
>
The w descriptor tells browsers each image's width. The sizes attribute describes how large the image displays at different viewport widths.
Browsers combine this information with device pixel density to choose the best image. A phone with a 400px-wide viewport but 2x pixel density might request the 800w image to look sharp on its high-resolution screen.
picture for Art Direction
Sometimes you need different images entirely — not just different sizes. A wide landscape photo might crop poorly on mobile. The picture element lets you specify completely different images:
<picture>
<source media="(max-width: 600px)" srcset="mobile-crop.jpg">
<source media="(max-width: 1000px)" srcset="tablet-crop.jpg">
<img src="desktop.jpg" alt="Product showcase">
</picture>
Mobile users see a tightly cropped version. Desktop users see the full composition. The img element provides the fallback and carries the alt text.
Format Fallbacks
Combine responsive images with modern format delivery:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
Browsers supporting AVIF get the smallest file. Others fall back to WebP or JPEG. This pattern delivers modern formats without breaking older browsers.
Combining Techniques
You can combine format selection with resolution switching:
<picture>
<source
type="image/webp"
srcset="image-400.webp 400w, image-800.webp 800w"
sizes="(max-width: 600px) 400px, 800px">
<img
src="image-800.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description">
</picture>
This serves the right format and the right size — optimal delivery for every user.