Responsive Images with srcset and sizes

Pick the correct pattern

Resolution switching keeps the composition the same and offers several file widths. It is the usual pattern for product photos, article figures, and cards. Use width descriptors such as 480w or 1200w when the rendered width changes with layout. The number is the file’s real pixel width, not a phone target or a CSS command.

Density switching serves a fixed CSS slot with more source pixels for a higher-density display. Its descriptors are 1x, 1.5x, or 2x, and it suits a logo or icon that is consistently, for example, 160 CSS pixels wide. Do not mix width and density descriptors in one srcset.

Know how sizes guides selection

With width descriptors, the browser evaluates sizes before downloading an image. Each entry pairs an optional media condition with a length. The first matching condition supplies the source size; the final unconditional length is the fallback. sizes is a selection hint, not a CSS rule.

The browser compares that source size with candidate widths to calculate effective density, then may consider display density, zoom, and network conditions. It is not required to choose the mathematically nearest filename. Supply honest candidates and a credible slot estimate; browser selection remains the user agent’s decision.

Derive candidates from the actual layout

Inventory components, not pages. A hero, editorial figure, product gallery, search thumbnail, and footer logo often have different slot widths. For each, record narrow and largest rendered width, aspect ratio, crop behavior, and initial-screen visibility.

Generate widths around the component’s meaningful slot range, with a larger option when detail justifies high-density rendering. Nearly identical files add build and cache complexity; only a tiny and huge file force compromise. Test generated URLs rather than assuming image transformations work.

Keep a valid src fallback and width and height values that match the delivered ratio. They reserve space but do not prevent responsive CSS from changing final dimensions.

Use picture for art direction

Art direction changes composition, not just file size. A wide landscape photo may need a tighter portrait crop on a narrow screen so its subject remains visible. The picture element can offer media-specific source options, followed by one img fallback. The browser considers each source’s media, type, and srcset information; the img carries alternative text, dimensions, and fallback behavior.

Prepare each crop with editorial and accessibility review. A mobile crop can remove a product detail or a person mentioned in alternative text. Put alt on img and describe the information or function that the image conveys. Use alt="" only for a genuinely decorative image; for a linked or button image, describe the action instead of the appearance. Do not introduce picture when the crop is unchanged: ordinary width-based srcset is simpler.

Avoid costly loading and markup mistakes

The usual waste is copying sizes="100vw" to every image. That may fit a narrow full-width figure but not a capped container or desktop card. The opposite failure is stale sizes after a redesign. Change CSS and sizes together.

Do not lazy-load an image important in initially visible content. Guidance recommends lazy loading below-the-fold images and keeping a visible hero eager. Fetch priority can elevate a truly vital image, but broad high-priority or preload rules can hurt performance. Do not rely on filenames or cached results as proof.

Test the request, the crop, and the repair

Test representative pages at layout-change widths, including just above and below a grid breakpoint. Include a high-density setting, wide desktop, and states that alter the slot. Confirm rendered dimensions, crop, alternative text, and visual sharpness.

In Chrome DevTools, open Network, reload with cache disabled or use Empty Cache And Hard Reload, filter image requests, and inspect URL, transfer size, headers, initiator, and timing. Throttle to reveal late or wasteful work. Record viewport, device scale factor, slot, candidate, transferred bytes, and expected result.

When a template, breakpoint, CDN, or asset pipeline changes, make this a release gate. Repair narrowly: correct sizes, fix a descriptor, regenerate a crop, restore a fallback, or remove an unnecessary preload. Retest on an empty-cache reload.

Apply it as an SIU resilience control

Responsive images reduce avoidable transfer but cannot guarantee a successful request. Origin errors, unavailable transformations, third-party hosts, and CDN failures need separate continuity and recovery planning.

For SIU, use test records to catch delivery regressions early, identify the responsible template or transformation rule, and make the smallest safe correction before launch. Pair this with availability preflight and rollback planning.