How to Serve Responsive Images in HTML
Use width, height, srcset, sizes, picture, and loading hints to deliver sharp images without wasting bandwidth.
The short version
Give the browser enough information to choose the right image before layout begins.
Reserve space and describe the image
Set intrinsic width and height so the browser can calculate the aspect ratio before the file arrives. This reduces layout movement. Write alt text that communicates the image purpose; use an empty alt value when the image is purely decorative.
<img
src="/report-960.webp"
srcset="/report-480.webp 480w,
/report-960.webp 960w,
/report-1440.webp 1440w"
sizes="(max-width: 720px) 100vw, 720px"
width="1440"
height="900"
alt="HTML report with inline comments beside a revenue chart"
>Use picture for art direction
Use srcset when the same image can be served at different resolutions. Use picture when the composition itself should change, such as a wide desktop screenshot becoming a tighter mobile crop.
Do not lazy-load the primary image in the first viewport. Images farther down the page are good candidates for loading="lazy".
Measure the actual transfer
Open the page on a narrow viewport with network throttling. Confirm the selected resource is close to the rendered size, modern formats are compressed appropriately, and the image does not delay the main content.
- Keep text as HTML rather than baking it into an image.
- Use decoding="async" for non-critical images when appropriate.
- Compress from the source asset, not a previously compressed export.
- Provide a stable fallback src.