Set Image Dimensions to Prevent Layout Shifts

Updated 7 November 2026 · Standard formula, shown below

Layout shifts happen when images load after the text around them, pushing content down and making the page jump. Setting explicit width and height attributes on your images reserves the space before they load, so the layout stays stable. This guide walks you through the process for HTML, CSS, and modern responsive images.

What You’ll Need

Access to the HTML source of your page (or a CMS that lets you edit image tags).
Knowledge of your image’s actual pixel dimensions (width and height).
A browser’s developer tools (optional, for checking layout shift).

Step-by-Step

Get your image’s real dimensions. Open the image file in any image viewer or editor, or use your file manager’s properties. Note the width and height in pixels, e.g., 800 x 600.
Add width and height attributes to the <img> tag. In your HTML, add width="800" height="600" (using the numbers you just found). These attributes should reflect the intrinsic size of the file, not the displayed size. Example: <img src="photo.jpg" width="800" height="600" alt="...">.
Keep the attributes even if you use CSS to resize the image. The browser uses the attributes to calculate the aspect ratio, then applies your CSS (like max-width: 100%) to scale it. This prevents layout shift because the space is reserved based on the ratio.
For responsive images using srcset and sizes: Add width and height attributes to the <img> tag as well. Use the dimensions of the largest image in your srcset (or any one of them, as long as the aspect ratio is the same). The browser will use these to reserve space.
For CSS background images: They don’t cause layout shift because they don’t take up space in the flow. But if you use an <img> inside a container with a background, the attributes still apply to the <img>.
Test your page. Use browser DevTools (Performance tab or the Layout Shift Regions overlay) to see if any shifts remain. Reload with a slow connection to confirm the space is reserved.

Common Mistakes

Using CSS width and height instead of attributes. If you set width: 800px; height: 600px; in CSS, the space is reserved, but it’s better to use the HTML attributes because they work even before CSS loads. Also, if you only set one dimension, the other is auto-calculated, which can cause a shift if the image has a different ratio.
Setting dimensions that don’t match the actual file. If you set 400×300 but the file is 800×600, the browser will stretch the image, and the aspect ratio will be wrong, causing a different layout than intended. Always use the real dimensions.
Forgetting the height attribute. If you only set width, the height is unknown, and the browser cannot reserve the correct space. Both are needed.
Using dimensions in CSS with !important that override the attributes. This can break the ratio. Let the attributes define the ratio, and use CSS only for scaling (like max-width: 100% and height: auto).

Tips

Use the aspect-ratio CSS property as a fallback: img { aspect-ratio: 4/3; } but the HTML attributes are simpler and more reliable.
For lazy-loaded images, the attributes are essential. Without them, the space collapses when the image is not yet loaded.
If you use a CMS like WordPress, the editor usually adds the dimensions automatically. Double-check if you paste raw HTML.
Run a Core Web Vitals audit (e.g., PageSpeed Insights) to see if CLS is under 0.1 after your changes.

Troubleshooting

Layout still shifts after adding attributes.

Check that the attributes are on the <img> tag, not on a parent div. The parent div’s size may still be unknown.
Make sure there is no CSS that sets height: auto on the image without a corresponding width. The attributes should be the source of truth.
If you use srcset, ensure all images in the set have the same aspect ratio. If they don’t, the browser may reserve space based on the default, then change when a different source loads.
If you use JavaScript to inject images, add the attributes in the markup you create.

Image appears distorted.

Your width and height attributes don’t match the file’s aspect ratio. Fix them to the real dimensions.
If you have CSS like width: 100%; height: 100%; on the image, it will stretch. Use height: auto; instead, or use object-fit: cover if you need a fixed size.

Space is reserved but it’s the wrong size.

If you use CSS to set a different width (e.g., max-width: 100%), the height should auto-calculate. If you also set a fixed height in CSS, it will override the ratio. Remove the fixed height.

Frequently Asked Questions

Do I need to set dimensions on every image?

Yes, ideally on every image that loads after the initial HTML. Even images at the top of the page can cause a shift if they load late.

What if my image is responsive and changes size?

That’s fine. The width/height attributes define the aspect ratio. The browser reserves space based on that ratio and the current CSS width. No shift occurs.

Can I use CSS instead of HTML attributes?

Yes, you can use the aspect-ratio property, but HTML attributes are more widely supported and work even if CSS fails to load. It’s best to use both.

What about images with unknown dimensions, like from a CDN?

You can use a placeholder with a known aspect ratio, or use a tiny transparent GIF with the correct ratio. But the best practice is to know the dimensions before serving.

Does this affect SEO?

Yes, layout shift is a Core Web Vitals metric, and reducing CLS can improve your search ranking. It also improves user experience.

What if I use a background image?

Background images do not cause layout shift because they are not part of the document flow. You don’t need dimensions for them.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.