Missing Image Dimensions Example
I cannot tell you how tall the bear was that I killed with two flints, only that it was certainly taller than the moment before.
The short answer
- What it is
- An image has missing dimensions when its img tag has an empty or absent width or height attribute. The browser then has no size to reserve before the file arrives.
- Why it matters
- Text and buttons jump when the image finally loads, which harms the reading experience. That movement counts toward Cumulative Layout Shift, one of the Core Web Vitals.
- How a crawler should report it
- Flag each img tag where width or height is empty or absent, and name the attribute that is missing. Report the page URL and image source for each hit.
- Live examples
/lab/missing-image-dimensions/(positive)/lab/missing-image-dimensions/near-miss/(near miss)
Why Images Without width and height Push Content Around
Missing image dimensions are a small markup gap with a visible cost. The usual cause is a template that prints only the src and alt. Rich text editors can drop the attributes too. Some developers remove them on purpose, because they once made responsive images look stretched. That concern is out of date, and the fix below shows why.
When the attributes are present, modern browsers use them to work out the aspect ratio before the file downloads. The browser can then hold the right amount of space, even if CSS sets the width to fill a column. Without them, the image starts with a height of zero. When the file arrives, the box grows and pushes everything below it down the page. A reader who was about to tap a link may hit the wrong one.
Detection is simple in the raw HTML. Look at each img tag and test both attributes for a value. To see the effect in a browser, load the page with a slow network in the developer tools and watch for the jump. Lighthouse also lists images that have no explicit size. Remember that a page can pass the HTML test and still shift, since other late content can move the layout as well.
To fix it, set width and height to the real pixel size of the file. Then add height: auto in your CSS, so the image scales and keeps its shape. These numbers define a ratio, so they do not lock the image to that size. If you use srcset, make sure all the files share one ratio. Most image pipelines and CMS themes can write these values for you at build time.