Unsized Images

Why It Matters

• Layout shifts frustrate users. A user reading a paragraph that suddenly jumps down because an image loaded above it has a terrible experience. Even worse, they might accidentally click the wrong button when content shifts beneath their finger or cursor.
• It directly hurts Cumulative Layout Shift. CLS is a Core Web Vital that measures visual stability. Unsized images are one of the most common contributors to poor CLS scores because each image that loads without reserved space triggers a shift.
• The fix takes almost no effort. Adding width and height attributes to an image tag is one of the simplest changes you can make. The browser uses those dimensions to calculate the correct aspect ratio and reserves the right amount of space before the image downloads.
• Modern browsers use dimensions intelligently. When you provide width and height attributes, modern browsers automatically calculate the aspect ratio and reserve the correct proportional space even in responsive layouts. This means the attributes work correctly even when CSS scales images to fit their container.

How to Fix It

1. Add width and height attributes to every image. Set the width and height attributes to the image's intrinsic dimensions in pixels. The browser uses these to calculate the aspect ratio and reserve space. You can still scale images responsively with CSS.
2. Use the CSS aspect-ratio property. For images where you know the ratio but not the exact pixel dimensions, the aspect-ratio CSS property tells the browser how to allocate vertical space based on the element's width. This works well for fluid layouts.
3. Set dimensions on responsive images too. Even when using srcset and sizes attributes, include width and height on the <img> tag. Use the dimensions of the fallback image — the browser will calculate the ratio correctly regardless of which source it loads.
4. Handle CMS and user-generated images. If your CMS allows users to upload images, configure it to automatically extract and set dimensions when inserting images into content. Most modern CMS platforms can do this.
5. Check video and iframe elements too. The same problem applies to embedded videos and iframes. Give these elements explicit dimensions or wrap them in containers with a set aspect ratio to prevent layout shifts.

Common Mistakes

• Thinking responsive design means no dimensions. Setting width and height does not prevent responsive scaling. Modern browsers use the attributes to calculate the aspect ratio. CSS still controls the actual display size. Both can and should coexist.
• Setting only width or only height. The browser needs both values to calculate the aspect ratio. Providing only one dimension does not help reserve the correct amount of vertical or horizontal space.
• Using incorrect dimensions. If the width and height attributes do not match the actual image's aspect ratio, the browser reserves the wrong amount of space. The image either gets distorted or the layout still shifts when it loads.
• Forgetting about lazy-loaded images. Lazy-loaded images are especially prone to layout shift because they load later when they enter the viewport. These images need dimensions even more urgently than above-the-fold images that load immediately.