Find the space that appears too late
Watch a representative page while its images load and note which content moves. Record the image, its container and the nearby text or controls affected. A layout-shift report can highlight the paragraph that moved even when an image above it caused the movement. Investigate the cause before applying a fix to the highlighted element.
Collect the image’s actual dimensions, the rendered width and the template rules controlling height. Include a narrow and a wide viewport when the design changes. Keep this task separate from reducing download bytes: a small image can still move content if the page reserves no space for it.
Choose a reliable aspect ratio
The official web.dev guidance recommends image width and height attributes or another appropriate way of reserving space, such as CSS aspect-ratio. The browser needs useful sizing information before the resource finishes loading. Check that the chosen dimensions describe the intended image or container rather than copying arbitrary values from an unrelated component.
For a normal responsive image, intrinsic dimensions can establish its proportions while CSS allows the displayed width to shrink. Inspect existing height rules so they do not distort the image. If the design deliberately crops images into a fixed shape, treat that container shape and the crop behavior as a deliberate design choice and check the visible result.
Review responsive variants and delayed images
Test whether a different source or crop is used on mobile. A reservation that matches the desktop image can be wrong for a mobile variant with different proportions. Record each relevant layout condition and confirm that the reserved space matches the intended presentation before and after the selected resource loads.
Apply the review to images farther down the page as well. Lazy loading does not reserve space by itself. Scroll through the actual reading journey and observe whether later images push surrounding content unexpectedly. Do not conclude that the whole page is stable because its first screen remained still.
Illustrative example: a two-to-one illustration
Suppose a fictional article illustration is 1200 pixels wide and 600 pixels high and is displayed without cropping. At a rendered width of 320 pixels, its proportional height is 160 pixels. The implementation can preserve that two-to-one relationship before the file arrives, subject to the page’s actual container and CSS rules.
The reviewer checks that the area exists during loading and that the text below it stays in place when the image appears. If the mobile design substitutes a square crop, the 160-pixel assumption no longer applies and the reservation must match that design. These numbers demonstrate the calculation; they are not measurements from a customer website.
Validate the change without overclaiming
Repeat the same loading and scrolling scenarios after the change, keeping the viewport and cache conditions documented. Inspect the affected region and any layout-shift evidence from the tool. Record whether this image’s space behaved as expected, including the case where loading is slow or fails. A visually stable reserved area should not conceal broken content from review.
Other elements, including injected content or fonts, may still cause movement. Do not report a guaranteed zero CLS score from adding two attributes. Save the corrected component, evidence and remaining observations. A website audit can identify candidates missing dimensions, but the rendered page must confirm that the reservation fits its real layout.