Responsive images let the browser pick the file that fits the device, so a phone does not download a desktop-sized photo. You provide several versions with srcset, tell the browser how wide the image will display with sizes, and use picture when you need a different crop or format. Done well, it cuts page weight without hurting quality.
Two different problems
MDN separates responsive images into two cases, and mixing them up causes most mistakes.
| Resolution switching | Art direction | |
|---|---|---|
| Problem | The same image at different pixel sizes or densities | A different crop or composition per layout |
| Markup | img with srcset and sizes |
picture with source media |
| Example | One photo at 480w, 800w and 1600w | Wide scene on desktop, tight portrait crop on mobile |
Resolution switching with srcset and sizes
MDN’s responsive images guide explains the mechanics. srcset lists candidate files with their real widths in w units, and sizes tells the browser the slot width the image will occupy under each condition. The browser uses the first matching condition, then picks the candidate closest to the slot size, so the order of conditions matters. If you omit sizes and use x descriptors instead, the browser chooses by device pixel ratio for an image of fixed CSS width.
<img
srcset="team-480.jpg 480w, team-800.jpg 800w, team-1600.jpg 1600w"
sizes="(width <= 600px) 100vw, 800px"
src="team-800.jpg"
alt="Three colleagues reviewing a storyboard"
width="800" height="533">The src is the fallback for browsers that ignore the new attributes. Setting width and height lets the browser reserve space before the image loads, which web.dev’s responsive basics recommends to avoid layout jumps.
Art direction with picture
Use picture when the image itself needs to change, for example a wide banner that becomes a tight crop of the subject on a phone. The first source whose media condition matches wins, and an img with src and alt is required as the final fallback. MDN advises using media only for art direction and not mixing it with media conditions in sizes.
Choosing formats
web.dev’s older responsive images article recommends JPEG for photos, SVG for logos and line art, and PNG over GIF. Google Search documentation lists the formats Google supports in image elements: BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. Newer formats such as WebP and AVIF often compress better, and you can offer them through picture with source type entries ahead of a JPEG fallback. Test the output visually, since aggressive compression can damage detail in gradients and skin tones.
Image CDNs can automate this. web.dev notes that a CDN can serve different formats depending on the browser and resize images on demand, and cites typical file size savings of 40 to 80 per cent. Treat that range as an indication from the article, not a guarantee for your site.
Loading mistakes that cost speed
- Lazy-loading the main image. web.dev’s analysis of WordPress tests found lazy loading above-the-fold images delayed Largest Contentful Paint. Load the first, main image eagerly, and lazy-load images further down.
- Prioritising the key image. Setting
fetchpriority="high"on the Largest Contentful Paint image helps the browser fetch it sooner, according to web.dev. - Missing dimensions. Without width and height, content shifts as images load.
- Oversized originals. Serving a 4000px camera file in a 400px slot wastes bandwidth.
- CSS background images for content. Google does not index CSS images, so use
imgelements for images that matter for search. - Weak alt text. Google calls alt text the most important attribute for image metadata. Describe the image in context without keyword stuffing.
A practical workflow
- Export master images at the largest size you need.
- Generate three to five widths covering your layout breakpoints.
- Choose formats, with a JPEG or PNG fallback.
- Write
sizesfrom your real layout, not guesses. Check it against actual rendered slot widths. - Set dimensions and alt text.
- Mark the key above-the-fold image as eager and high priority.
- Measure with PageSpeed Insights and your Core Web Vitals report. See website speed and Core Web Vitals.
Trade-offs
More variants mean more files to generate, store and test. Frameworks and build tools can automate it. For example, the choice of platform, covered in Astro versus WordPress, affects how much of this you get by default. Faster pages also support better results on the site overall, as discussed in what makes a modern business website convert.
Where Radiance Impact fits
Radiance Impact’s Technology division builds and optimises business websites, including image delivery and page speed. To talk about a build or a speed review, contact us or see Digital Technology and AI Solutions.
Sources
- Responsive images, MDN Web Docs
- Responsive images, web.dev, Google
- Responsive web design basics, web.dev, Google
- Google image SEO best practices, Google Search Central
- Image CDNs, web.dev, Google
- Optimize LCP: lazy loading, web.dev, Google
