Seoxpert.io
mediumBest Practices

Images Without Explicit Dimensions

Images without width and height attributes can cause layout shifts and negatively impact Core Web Vitals (CLS).

By Seoxpert Editorial · Published

Why it matters

When images lack explicit width and height attributes, browsers cannot reserve the correct space before the images load. This often causes layout shifts as images appear, leading to a poor user experience and negatively affecting the Cumulative Layout Shift (CLS) metric, a key factor in Google's Core Web Vitals.

Impact

Leaving this unresolved can harm user experience and lower your site's Core Web Vitals score, potentially affecting SEO rankings.

How it's detected

An automated crawler scans HTML for <img> tags missing width and height attributes.

Common causes

  • Images added via CMS or editor without specifying dimensions
  • Developers omitting width and height attributes for responsive images
  • Images dynamically loaded or injected via JavaScript without dimensions
  • Legacy code or templates lacking explicit image sizing

How to fix it

Add width and height attributes to every <img> tag, matching the image's natural pixel dimensions. For example: <img src="photo.jpg" width="800" height="600" alt="...">. You can still use CSS to control the displayed size or make images responsive. Always ensure the HTML attributes reflect the actual image size to prevent layout shifts.

Code examples

Problem: Missing width and height

<img src="photo.jpg" alt="A photo">

Fix: Add explicit width and height

<img src="photo.jpg" width="800" height="600" alt="A photo">

FAQ

Why do images need width and height attributes if I'm using responsive CSS?

Width and height attributes reserve space in the layout before the image loads, preventing layout shifts. CSS can still override the display size.

Can I use percentage values for width and height attributes?

No, width and height attributes must be pixel values matching the image's natural dimensions. Use CSS for responsive scaling.

What if I don't know the image's natural dimensions?

Check the image file properties or inspect it in your browser to find its natural width and height in pixels.

Does this apply to images loaded via JavaScript?

Yes, dynamically inserted images should also have explicit width and height attributes set in the HTML or via JavaScript.

Found this issue on your site?

Run a scan to see if Images Without Explicit Dimensions affects your pages.

Scan my website →