You’ve seen it happen. You start reading an article, an image finally loads above the text, and everything you were reading jumps down the page. It’s irritating for visitors, and Google tracks it as a metric called Cumulative Layout Shift. The fix is usually just two small attributes.
Why the page jumps
When a browser starts loading a page, it doesn’t know how big an image will be until the file arrives. With no information, it leaves no room, lays out the text, and then shoves everything aside when the image appears. If it knew the dimensions in advance, it could reserve the correct space from the start.
The fix: add width and height attributes
<img src="team-photo.webp" alt="Our team at the office" width="1200" height="800">The numbers should be the image’s real pixel dimensions, the width and height of the file itself. Modern browsers use them to work out the aspect ratio (here 3:2) and hold the right amount of space before the image downloads, even if the image is later displayed smaller.
But what about responsive layouts?
If your image needs to shrink on small screens, add a little CSS alongside the attributes:
img {
max-width: 100%;
height: auto;
}The attributes provide the ratio, while max-width: 100% stops the image from overflowing its container and height: auto keeps the proportions correct when the width changes. The two work together nicely.
Common mistakes
- Using the displayed size instead of the real size. That’s okay as long as the ratio matches, but the real file dimensions are the safest choice.
- Setting both width and height in CSS to fixed values. This can stretch or squash the picture if the ratio doesn’t match. We cover why in what is aspect ratio.
- Leaving them out of images that load late. Lazy-loaded images especially need them. See lazy loading images.
- Using HTML attributes to shrink a huge file. Setting width=”300″ on a 4000-pixel image doesn’t make it smaller to download. The browser still fetches the whole thing. Resize the actual file instead.
That last point matters most
People often “resize” an image by changing the width in HTML and think the job is done. The visitor’s browser still downloads the full original, so the page stays slow. True resizing happens on the file. Read image dimensions vs file size to see the difference between how an image looks and what it costs to download.
Does this affect SEO?
Indirectly, yes. Layout shift is part of Google’s Core Web Vitals, which feed into page experience. Stable pages are nicer for visitors and measure better. Pair this with properly sized, compressed images for the best result. Our article on image size and SEO explains the connection.
WordPress users
Recent WordPress versions add width and height automatically to images inserted through the editor, so you’re probably covered. If you hand-code or use custom blocks, check the page source.
Checklist
- Every img tag has width and height matching the file
- CSS has max-width: 100% and height: auto
- Files are resized before upload, not just in HTML
Get the real dimensions right first with our online image resizer, then drop those exact numbers into your HTML.