Images without width and height: reserving space so the page does not jump

What it looks like

Before

<img src="/wp-content/uploads/mug.jpg" alt="Blue stoneware mug">

After

<img src="/wp-content/uploads/mug.jpg" alt="Blue stoneware mug" width="1200" height="800">

/* and in the stylesheet */
img { max-width: 100%; height: auto; }

The attributes and the CSS work together

A frequent worry is that fixed dimensions break responsive layouts. They do not, provided the stylesheet contains:

img { max-width: 100%; height: auto; }

The attributes supply the ratio; the CSS supplies the displayed size. A 1200 by 800 image in a 400-pixel column is drawn at 400 by 267, and that space is reserved from the first paint.

The values should be the intrinsic pixel dimensions of the file, or at least the same ratio. Wrong ratios cause a shift when the real image replaces the placeholder box, which is the thing you are trying to avoid. Do not use percentages or units in the attributes: width="100%" is not valid there.

Find the images

Run this in the browser console on the page:

[...document.images].filter(i => !i.getAttribute('width') || !i.getAttribute('height'))
  .map(i => i.currentSrc || i.src);

It lists the source of every image lacking either attribute. PageSpeed Insights gives the same list under the Lighthouse audit, and its "Avoid large layout shifts" diagnostic shows which elements actually moved, which tells you which missing dimensions matter. An undersized icon in the footer that never shifts anything is low priority; an article's lead image is not.

Our image alt text checker lists every <img> in a page's HTML, which is a convenient inventory to work from, though it reports alt text states and not dimensions.

What WordPress adds for you

WordPress writes width and height into the markup when you insert an image from the Media Library, and at render time it fills them in for content images that are missing them, as long as it can identify the attachment from the wp-image-123 class on the tag. Themes that call wp_get_attachment_image() or the_post_thumbnail() get the attributes as well.

Dimensions go missing when an image is outside that system:

• External images. Files hot-linked from another domain or a CDN path WordPress does not map to an attachment.
• Hand-written HTML in a Custom HTML block, widget or template, with a bare <img src>.
• SVG files. WordPress often cannot read dimensions from an SVG, and many SVGs have only a viewBox.
• Page-builder and slider output that builds its own tags.
• Images inserted by JavaScript: galleries, carousels, lazy-load libraries that swap a placeholder for the real tag.
• Markup filtered by an optimisation plugin that strips attributes when rewriting to a CDN or to <picture> elements.

Add the missing dimensions

1. Content images. Re-insert the image from the Media Library, or add the attributes in the block's HTML view. For bulk cases where the wp-image- class was lost, restoring the class lets WordPress fill in dimensions again.
2. Theme templates. Replace hard-coded tags with wp_get_attachment_image(), or add the attributes by hand:

<img src="<?php echo esc_url( get_theme_file_uri( 'img/badge.png' ) ); ?>" width="240" height="80" alt="Certified roaster badge">

3. SVGs. Add width and height to the <img> tag yourself, using the ratio from the file's viewBox.
4. External images. Add the attributes manually, or upload the file to your own Media Library, which is better for reliability in any case.
5. Slots filled by script. Where you cannot control the tag, reserve the space on the container:

.gallery-item { aspect-ratio: 4 / 3; }

Other causes of layout shift worth checking at the same time

Missing image dimensions are the classic cause of CLS but not the only one. While you have the diagnostics open, look for:

• Embeds and iframes without a reserved height: video players, maps, social posts.
• Ad slots that collapse when empty and expand when filled.
• Web fonts that swap in with different metrics from the fallback font.
• Banners injected at the top of the page after load, such as cookie notices and promotion bars that push content down instead of overlaying it.

Each has the same remedy in principle: reserve the space before the content arrives.

How much it matters for search

CLS is one of the three Core Web Vitals, and Google uses those as part of its page experience signals. The effect on rankings is small beside content relevance. The effect on people is direct: a page that jumps while someone is reading, or moves a button as they tap it, loses them. Treat this as a usability fix with a minor search benefit, and prioritise images near the top of your most-visited templates. The wider picture is in our guide to improving Core Web Vitals in WordPress.

Re-test for shifts

Run the console snippet again; it should return an empty list, or only images you have deliberately handled with aspect-ratio. Reload the page with network throttling enabled in DevTools and watch whether text moves as images arrive. Rerun PageSpeed Insights and check the Lighthouse audit and the lab CLS value. Field data in Search Console's Core Web Vitals report follows over the next 28 days.