Responsive Images and Srcset

The Missing Srcset filter identifies image uses without responsive source candidates; Has Srcset shows detected implementations. Responsive markup lets the browser choose a suitable file for the viewport and display density.

Understand the core attributes

<img
  src="team-1200.jpg"
  srcset="team-480.jpg 480w, team-800.jpg 800w, team-1200.jpg 1200w"
  sizes="(max-width: 640px) 100vw, 800px"
  width="1200"
  height="800"
  alt="The product team reviewing a site audit"
/>

srcset lists candidates, while sizes describes the expected rendered width. Keep a valid src fallback. Use <picture> when art direction or format fallback requires different sources, not merely as extra markup.

Analyze responsive delivery

1. Identify large visible images and repeated templates first.
2. Inspect src, srcset, sizes, width, height, and chosen browser request.
3. Resize representative pages and compare downloaded files.
4. Confirm every candidate returns 2xx and represents the same intended content.
5. Group Missing Srcset by component and image role.
6. Measure transferred bytes and visual quality before prioritizing changes.

Not every icon, tiny badge, SVG, or already small asset needs multiple raster candidates. Missing Srcset is an optimization opportunity, not an automatic SEO error.

Example decision

A 2400-pixel article hero is sent to every mobile visitor. Generate several candidates, provide accurate sizes and intrinsic dimensions, and test the chosen request. Leave a 24-pixel interface icon as one optimized source.

Verify the implementation

Use browser responsive mode and the network panel to confirm appropriate candidate selection at several widths and densities. Test fallback behavior, broken candidates, lazy loading, and recrawl. Compare page weight and real-user experience after deployment.

Choose candidates that match real layouts

Srcset lets the browser choose from image candidates. The sizes attribute tells it how much viewport width the image is expected to occupy. A technically present srcset can still waste bandwidth if candidate widths or sizes do not match the actual layout.

Use width descriptors for fluid images and density descriptors for fixed-size assets. Use the picture element when you need art direction, such as a tighter mobile crop, or a format fallback. Always keep a valid img fallback.

Audit beyond Has Srcset

For representative pages, inspect:

• the rendered width at common breakpoints;
• the selected resource in browser network tools;
• whether high-density screens receive an appropriate candidate;
• whether the largest candidate is unnecessarily large;
• whether crops preserve essential content and text;
• whether the LCP image is discoverable early.

Missing Srcset is not automatically a problem for tiny icons, SVGs, or images that always render at one small size.

What changes should mean

Adding responsive markup should move images from Missing Srcset to Has Srcset. Transfer size may fall on small screens, but field performance changes take time and depend on caching, network, and which image is the Largest Contentful Paint element. If LCP does not improve, inspect server response time, discovery delay, and render delay as well.

Candidate widths should cover the layout without producing many nearly identical files. See Google's responsive image guidance and web.dev's LCP optimization guide.

Frequently asked questions

Does every raster image need srcset?

No. A small image displayed at one fixed size may not benefit. Prioritize large, fluid, content images and confirm that candidate files create meaningful bandwidth savings.

Can responsive images improve LCP?

They can reduce download time when the LCP image was oversized. LCP also includes server response, discovery, and render delay, so measure the full metric before attributing the result.

What is the difference between srcset and picture?

Srcset offers alternative files and lets the browser select a candidate. Picture can provide different crops, media conditions, or formats before falling back to img. Use picture for art direction, not as a requirement for every responsive image.

How many image candidates should I provide?

Use enough candidates to cover meaningful layout widths without generating nearly identical files. Start from actual rendered sizes and traffic devices, then confirm browser selections in network tools.