One of the most common causes of a poor user experience on the web is “layout shift,” where content on a page moves around as it loads. A primary cause of this is images that are missing their `width` and `height` size attributes. When these attributes are absent, the browser doesn’t know how much space to reserve for the image, causing the text to reflow and the layout to shift after the image finally loads. This is a critical issue for your Core Web Vitals and, by extension, your SEO.
Think of your webpage as a newspaper layout. If you don’t tell the printer the size of a photo, they will just leave a blank space and start printing the text. When the photo arrives, they have to stop, move all the text around to make room, and restart. This is exactly what happens in a browser, and it’s a jarring experience for the reader. For a broader look at image optimization, see our guide on the images category.
The SEO Impact of Cumulative Layout Shift (CLS)
The metric used to measure this instability is Cumulative Layout Shift (CLS), which is one of Google’s three Core Web Vitals. A high CLS score is a direct signal of a poor user experience, which can negatively impact your rankings. As Ahrefs’ guide to Core Web Vitals makes clear, always including width and height attributes on your images is a fundamental best practice.
- Improved Core Web Vitals: Adding size attributes is one of the easiest and most effective ways to improve your CLS score.
- Better User Experience: It creates a stable, faster-loading page that doesn’t jump around, which builds trust and reduces user frustration.
A Step-by-Step Guide to Fixing Missing Size Attributes
The goal is to ensure that every `` tag on your site has a `width` and `height` attribute that reflects the intrinsic size of the image file. For a deep dive into this topic, this guide from Google on optimizing CLS is an excellent resource.
Example: Adding Width and Height Attributes
<!-- Before: Missing size attributes --> <img src="cat.jpg" alt="A cat sitting on a couch"> <!-- After: Size attributes added --> <img src="cat.jpg" width="640" height="360" alt="A cat sitting on a couch">For more on this topic, see our guide on incorrectly sized images.
Frequently Asked Questions
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures the visual stability of a page. A high CLS score means that elements on the page are moving around as it loads, which is a frustrating user experience. Missing image dimensions are a primary cause of CLS.
What is the `srcset` attribute?
The `srcset` attribute is a powerful tool for responsive images. It allows you to provide a list of different-sized versions of an image, and the browser will choose the most appropriate one based on the user’s screen size and resolution. This can significantly improve page speed.
How can I find all the images on my site that are missing size attributes?
The most effective way is to use a website crawler like Creeper. It will scan every page on your site and provide a report of all images, specifically flagging any that are missing the `width` and `height` attributes in their `` tag.
Is your page layout unstable? Start your Creeper audit today to find and fix all images with missing size attributes.