Responsive images automatically adapt to the visitor's screen size and resolution — serving a smaller file to a phone and a larger one to a high-resolution desktop monitor, instead of sending everyone the same oversized file.
Syntax
<img
src="photo-800w.jpg"
srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="..."
>Basic Example
<img
src="course-banner-800.jpg"
srcset="course-banner-400.jpg 400w, course-banner-800.jpg 800w, course-banner-1600.jpg 1600w"
sizes="100vw"
alt="CodingNow course banner"
>Browser output: visually just one image — but the browser silently picks whichever file in srcset best matches the visitor's actual screen width and pixel density, rather than always downloading the largest one.
How It Works
- The browser looks at the device's viewport width and pixel density.
- It checks
sizesto work out how large the image will actually be displayed. - It picks the smallest candidate from
srcsetthat still looks sharp at that display size — a phone gets a small file, a large retina monitor gets a bigger one.
Important Attributes
| Attribute | Purpose |
|---|---|
src | A fallback image for browsers that don't support srcset |
srcset | A list of candidate image files with their real widths — see srcset |
sizes | Tells the browser how large the image will actually render at different viewport widths |
Real-World Example
<picture>
<source media="(max-width: 600px)" srcset="hero-mobile.jpg">
<img src="hero-desktop.jpg" alt="CodingNow campus hero image">
</picture>Combining responsive image techniques with <picture> for an art-directed hero banner — a genuinely different crop for mobile, not just a scaled-down version. See picture-element.
Common Mistakes
- Serving the same large desktop-sized image to every device, wasting significant bandwidth on mobile connections
- Writing an incorrect or missing
sizesattribute, which can cause the browser to pick a larger (or smaller) image than actually needed
Best Practices
- Generate multiple sizes of every important image and serve them via
srcset - Set an accurate
sizesvalue that reflects the image's real rendered width across breakpoints
Accessibility Considerations
No direct accessibility impact beyond the underlying image still needing correct alt text — responsive images are purely a performance/bandwidth technique.
SEO Considerations
Faster-loading, appropriately-sized images directly improve Core Web Vitals scores like Largest Contentful Paint — a real, measurable ranking factor, especially significant on mobile search.
Browser & Modern HTML Notes
srcset/sizes and <picture> are both well-supported HTML5-era additions, purpose-built for exactly this problem — before them, developers relied entirely on JavaScript workarounds.
Mini Practice
- Write a
srcsetwith three candidate image widths for a banner image. - Add a matching
sizesattribute assuming the image displays at full viewport width on mobile and half viewport width on desktop.
