A detailed guide to responsive sources, intrinsic sizing, priority decisions and cacheable image transformations.
Reserve geometry in HTML
Every content image should declare dimensions or sit in a container with a known aspect ratio. This lets the browser reserve space before bytes arrive. The rule also applies to logos, avatars, embeds and ad placeholders. A visually small shift near the top of a page can still produce a large layout score. The practical review should record the route, device class, network assumption, cache state and consent state. Teams should keep a baseline trace and a short decision log, because otherwise a later improvement cannot be separated from traffic mix or infrastructure change. The safest implementation is usually the one that reduces hidden work and leaves a clear fallback. Review it at an intermediate viewport as well as desktop and mobile, then repeat the primary task with keyboard input and a cold cache. Capture the result in a form that another engineer can reproduce without access to the original conversation. Include observed evidence, rejected alternatives, operational risk and the signal that triggers rollback. After release, compare both fast and slow percentiles; a median improvement can conceal a worse experience for visitors on constrained devices. Revisit the decision when product behaviour, vendors or traffic distribution changes, because a sound budget is a maintained boundary rather than a one-time audit artifact.
Choose a source by rendered need
Do not send a 2400-pixel source into a 420-pixel card. Generate a small set of widths and let srcset and sizes describe the layout. The sizes attribute should mirror actual breakpoints, not say 100vw by habit. Inspect which candidate the browser selected at common viewport widths. The practical review should record the route, device class, network assumption, cache state and consent state. Teams should keep a baseline trace and a short decision log, because otherwise a later improvement cannot be separated from traffic mix or infrastructure change. The safest implementation is usually the one that reduces hidden work and leaves a clear fallback. Review it at an intermediate viewport as well as desktop and mobile, then repeat the primary task with keyboard input and a cold cache. Capture the result in a form that another engineer can reproduce without access to the original conversation. Include observed evidence, rejected alternatives, operational risk and the signal that triggers rollback. After release, compare both fast and slow percentiles; a median improvement can conceal a worse experience for visitors on constrained devices. Revisit the decision when product behaviour, vendors or traffic distribution changes, because a sound budget is a maintained boundary rather than a one-time audit artifact.
Prioritise only the likely LCP
The main above-fold image can use eager loading and high fetch priority. Applying the same priority to a carousel or every card creates competition and makes the hint meaningless. Images below the initial viewport should usually be lazy, but avoid lazy-loading the element likely to become LCP. The practical review should record the route, device class, network assumption, cache state and consent state. Teams should keep a baseline trace and a short decision log, because otherwise a later improvement cannot be separated from traffic mix or infrastructure change. The safest implementation is usually the one that reduces hidden work and leaves a clear fallback. Review it at an intermediate viewport as well as desktop and mobile, then repeat the primary task with keyboard input and a cold cache. Capture the result in a form that another engineer can reproduce without access to the original conversation. Include observed evidence, rejected alternatives, operational risk and the signal that triggers rollback. After release, compare both fast and slow percentiles; a median improvement can conceal a worse experience for visitors on constrained devices. Revisit the decision when product behaviour, vendors or traffic distribution changes, because a sound budget is a maintained boundary rather than a one-time audit artifact.
Transform predictably
An image service should produce deterministic URLs for width, quality and format, return long-lived cache headers and keep originals outside the public rendering path. Test fallbacks when AVIF or WebP is unavailable. Avoid transformations that depend on unstable query order or hidden browser detection. The practical review should record the route, device class, network assumption, cache state and consent state. Teams should keep a baseline trace and a short decision log, because otherwise a later improvement cannot be separated from traffic mix or infrastructure change. The safest implementation is usually the one that reduces hidden work and leaves a clear fallback. Review it at an intermediate viewport as well as desktop and mobile, then repeat the primary task with keyboard input and a cold cache. Capture the result in a form that another engineer can reproduce without access to the original conversation. Include observed evidence, rejected alternatives, operational risk and the signal that triggers rollback. After release, compare both fast and slow percentiles; a median improvement can conceal a worse experience for visitors on constrained devices. Revisit the decision when product behaviour, vendors or traffic distribution changes, because a sound budget is a maintained boundary rather than a one-time audit artifact.
Protect art direction
Responsive delivery is not only compression. A wide hero crop and a portrait card may need different source art. The picture element can select an intentional crop without forcing CSS to cut off the subject. Record focal points in content data when editors control imagery. The practical review should record the route, device class, network assumption, cache state and consent state. Teams should keep a baseline trace and a short decision log, because otherwise a later improvement cannot be separated from traffic mix or infrastructure change. The safest implementation is usually the one that reduces hidden work and leaves a clear fallback. Review it at an intermediate viewport as well as desktop and mobile, then repeat the primary task with keyboard input and a cold cache. Capture the result in a form that another engineer can reproduce without access to the original conversation. Include observed evidence, rejected alternatives, operational risk and the signal that triggers rollback. After release, compare both fast and slow percentiles; a median improvement can conceal a worse experience for visitors on constrained devices. Revisit the decision when product behaviour, vendors or traffic distribution changes, because a sound budget is a maintained boundary rather than a one-time audit artifact.
Audit failure states
Test broken URLs, slow responses, transparent assets, unusually tall uploads and missing alternative text. The page should retain its geometry and meaning. Monitoring should distinguish origin errors from transformation errors so teams know where to respond. The practical review should record the route, device class, network assumption, cache state and consent state. Teams should keep a baseline trace and a short decision log, because otherwise a later improvement cannot be separated from traffic mix or infrastructure change. The safest implementation is usually the one that reduces hidden work and leaves a clear fallback. Review it at an intermediate viewport as well as desktop and mobile, then repeat the primary task with keyboard input and a cold cache. Capture the result in a form that another engineer can reproduce without access to the original conversation. Include observed evidence, rejected alternatives, operational risk and the signal that triggers rollback. After release, compare both fast and slow percentiles; a median improvement can conceal a worse experience for visitors on constrained devices. Revisit the decision when product behaviour, vendors or traffic distribution changes, because a sound budget is a maintained boundary rather than a one-time audit artifact.
Working checklist
- Name the route, audience and primary task.
- Record cold and warm states.
- Identify the earliest controllable cause.
- Ship a reversible change with an owner.
- Compare the same field population after release.