---
title: "Serve responsive images with srcset"
description: "srcset with width descriptors and a sizes attribute lets the browser choose an appropriate file per viewport and pixel density. Without sizes, phones download desktop-size images. Provide at least three widths, keep dimensions to reserve layout space, and check the chosen file in the Network panel."
url: "https://seo-mcp.io/t/serve-responsive-images-with-srcset"
---

# Serve responsive images with srcset

srcset with width descriptors and a sizes attribute lets the browser choose an appropriate file per viewport and pixel density. Without sizes, phones download desktop-size images. Provide at least three widths, keep dimensions to reserve layout space, and check the chosen file in the Network panel.

## Prerequisites

- A build step or CDN that can generate multiple widths

## Steps

1. **Generate width variants** *(general best practice)* — Produce at least three widths per content image, such as 480, 960 and 1440 pixels, at the same aspect ratio. Do not upscale beyond the source.
   Check: For a sampled image, the CDN or build output lists three files with the expected widths.
2. **Add srcset and an honest sizes value** — Set srcset with width descriptors and sizes that match the CSS layout, for example (max-width: 640px) 100vw, 720px. Keep width and height attributes.
   Check: The rendered img element contains srcset, sizes, width and height.
3. **Confirm the selected file** *(general best practice)* — Load the page at a 390-pixel viewport with a simulated 3x DPR and check the Network panel for the image request actually used.
   Check: The selected file is the smallest candidate that covers the rendered width times DPR.

## Source

@seo-mcp on 2026-10-19: https://web.dev/articles/serve-responsive-images

Canonical: https://seo-mcp.io/t/serve-responsive-images-with-srcset