Skip to content
DevMarDe
Crawl Audit check 81Crawl AuditPerformance

Image width and height: Crawl Audit check 81

Crawl Audit check 81 looks for images without width and height. Why those two attributes stop your page jumping as it loads, and how to add them.

Zain Kazmi2 min read
On this page
Check
81 of 200
Module
Performance & Core Web Vitals
Group
Asset Compression & Optimization
Impact
Medium

Short answer: when an image has no width and height, the browser doesn't know how much room to leave for it, so the text below jumps when it arrives. That jumping is what Cumulative Layout Shift (check 74) measures. Check 81 warns when any image on the page is missing either attribute.

What Crawl Audit checks

  • Crawl Audit reads every <img> in the HTML and counts those missing width or height.
  • Pass: no images, or all have both. Warning: some don't, shown as a count, such as 3 of 12.

Images set with CSS aspect-ratio instead don't trip a layout shift, but they still count as missing here, because Crawl Audit reads the HTML attributes only.

What Google says

  • web.dev: "Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect-ratio or similar."
  • "Because modern browsers set the default aspect ratio of images based on an image's width and height attributes, you can prevent layout shifts by setting those attributes on the image".
  • Even if the numbers aren't exact, "it still causes less layout shift than the 0x0 default size of an image with no dimensions provided."

The attributes don't fix the displayed size. With CSS such as width: 100%; height: auto, the image still scales; the browser just reserves the right shape.

<img src="/shop-front.webp" width="1200" height="800" alt="Shop front">

On devmarde.com

All seven images on our homepage had width and height on 3 October, and PageSpeed passed "Image elements have explicit width and height".

On your platform

  • WordPress: since 5.5, WordPress adds width and height to images from the media library if they're missing. Images pasted as raw HTML, or from other sites, aren't covered.
  • Next.js: next/image needs width and height (unless you use fill or a static import), and uses them "to infer the correct aspect ratio of image and avoid layout shift".
  • Shopify, Wix and Squarespace: check images in custom HTML blocks and apps, which are the usual gaps.

Sources

All 200 Crawl Audit checks

See how your site does on every check.

Crawl Audit runs this check and 199 others on your domain. The full report is $7.89, one time. The free check on this site covers 25.