How Images Cause Layout Shift
When an image loads without explicit width and height attributes, the browser does not know how much space to reserve for it. The image starts at zero height in the layout. When it finishes loading, it expands to its natural dimensions, pushing everything below it downward. This sudden movement is layout shift — measured by Cumulative Layout Shift (CLS).
A single unsized hero image shifting content by 400px can generate a CLS score well above 0.25 — Google considers anything above 0.1 a poor experience. On pages with multiple unsized images, the shifts compound as each image loads at a different time.
Why Width and Height Attributes Matter
Modern browsers use the width and height attributes on <img> tags to calculate an aspect ratio before the image loads. When these attributes are present, the browser reserves the correct amount of vertical space in the layout, even before a single byte of image data arrives.
The CSS aspect-ratio property achieves the same result and is now supported in all modern browsers. But for WordPress sites, the HTML attributes are the more reliable approach — WordPress adds them automatically to images inserted through the editor, and they work without any additional CSS.
Where WordPress Gets It Right
WordPress adds width and height attributes to images in post content automatically. If you insert an image through the block editor or classic editor, the attributes are present and layout shift is prevented. WordPress also adds these attributes to images generated by wp_get_attachment_image() and related functions.
Where Things Go Wrong
Layout shift from images typically happens in cases WordPress’s automatic handling misses:
- Page builder images — some page builders generate image markup without width and height attributes, or strip them during rendering. Check your builder’s output in the browser.
- CSS background images — background images cannot have HTML dimension attributes. The container must be sized independently, either with fixed dimensions or an aspect-ratio rule.
- Dynamically loaded images — images inserted by JavaScript after page load (carousels, lightboxes, infinite scroll) often lack dimension attributes.
- Responsive CSS overriding dimensions — CSS rules like
width: 100%; height: auto;work correctly with width/height attributes. Butheight: autowithout the HTML attributes means the browser cannot calculate the aspect ratio. - Lazy-loaded images — when a lazy-loaded image enters the viewport without reserved space, the shift happens at scroll time rather than page load, but it still counts toward CLS.
Testing for Image-Related Shift
Chrome DevTools has a Layout Shift Regions overlay (in the Rendering panel) that highlights elements causing layout shift in blue. Load your page with this enabled and watch for image-shaped blue rectangles appearing as images load. The Performance panel’s “Layout Shift” entries in the timeline show exactly which elements shifted and by how much.
For field data, check your CLS scores in Core Web Vitals reports. If CLS is poor and your page has images, unsized images are one of the first things to investigate.
Further Reading
- Images without dimensions (web.dev) — Google’s explanation of how missing image dimensions cause CLS and how the browser uses width/height for aspect ratio calculation.