Choose widths from the layout
Start with the rendered width of the image at important layout breakpoints. A content image might need 480, 768 and 1200 pixel versions, while a full-width hero may also need 1600 pixels. Do not upscale beyond the source because it adds bytes without adding real detail.
The browser uses the width descriptors in srcset together with the sizes attribute and device pixel density. Accurate sizes values are important: if the browser thinks an image occupies the full viewport when it actually occupies half, it may select a file that is too large.
Write sizes for the rendered slot
The sizes attribute describes the image slot, not the source file. For an image that fills the viewport on phones and half the viewport on desktop, a useful value could be `(max-width: 700px) 100vw, 50vw`.
Test the markup in the real page. Browser developer tools can show which source was selected, but remember that cached larger images may be reused during repeated testing.
Keep markup and files together
Use predictable filenames and upload every generated width referenced by srcset. Missing variants cause extra requests or fallback behavior. Include width and height attributes on the image element to reserve layout space and reduce visual movement while the file loads.
Set meaningful alt text in the final page when the image carries information. Use an empty alt attribute only for genuinely decorative images.
- Generate only widths the layout can use
- Keep all variants in the same format and crop
- Include intrinsic width and height
- Verify the selected source on mobile and desktop