Image Dimensions Checker: Find Images Missing Width/Height

Paste any URL and RankNibbler scans every image, flagging those missing the width and height attributes that are required to prevent Cumulative Layout Shift. Free, instant, no signup. Each flagged image is listed with its src so you can fix them fast.

Check a page now →

Why Image Dimensions Matter

When a browser encounters an <img> tag without width and height attributes, it does not know how much space the image will need until the image file is downloaded and decoded. In the meantime, the browser renders the rest of the page, then re-arranges everything when the image arrives. That mid-page reshuffle is what users perceive as "jumpy" loading — and Google measures it as Cumulative Layout Shift (CLS), one of the three Core Web Vitals.

CLS is a direct Google ranking factor. Pages with poor CLS scores (above 0.25) rank worse than pages with good scores (below 0.1). Image dimensions are the single most common cause of CLS problems — and the easiest to fix.

The Right Way to Set Image Dimensions

The modern pattern combines HTML attributes with responsive CSS:

<img src="photo.jpg"
     width="1200"
     height="800"
     alt="Descriptive alt text"
     loading="lazy">

And in your CSS:

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

The width and height attributes tell the browser the aspect ratio (1200/800 = 1.5). It reserves the correct amount of space even before the image loads. The CSS then makes the image responsive — it scales to fit its container while maintaining the aspect ratio from the attributes. No CLS, fully responsive.

Common Image Dimension Mistakes

Omitting Dimensions Entirely

The most common mistake. An <img> tag with no width/height means the browser reserves zero space until the image loads, then pushes everything down. Even a single above-the-fold image without dimensions can produce a CLS score above 0.1.

Setting Dimensions in CSS Only

CSS dimensions don't help — the browser needs to know the aspect ratio before CSS is parsed and applied. Always set width/height as HTML attributes on the <img> tag, then use CSS for responsive behaviour.

Wrong Aspect Ratio

Setting width="300" height="200" when the actual image is 1200x800 still works — the aspect ratio (1.5) is correct. But setting width="300" height="300" on a 1200x800 image produces a squeezed or stretched image. Always use either the natural dimensions or dimensions with the same aspect ratio.

Using Percentages in Attributes

The HTML attributes expect pixel values. width="100%" is invalid and gets ignored. Use pixel values in attributes, percentage in CSS.

Background Images Without Containers Sized

CSS background images have the same problem: if the container has no defined height, it collapses until the image loads. Always set explicit height or aspect-ratio on containers using background images.

Modern Alternatives: aspect-ratio CSS

CSS now supports an aspect-ratio property that solves the dimension problem purely in CSS:

img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
}

This works in all modern browsers and is useful when you cannot know exact dimensions upfront (e.g., user-uploaded images in a CMS). For images where dimensions are known, the HTML attribute approach is simpler and has broader compatibility.

How to Audit Your Images

  1. Run this checker on key pages. Homepage, top product pages, and landing pages first — they drive the most traffic and benefit most from fixing CLS.
  2. Review the list of flagged images. Each image without dimensions is listed with its src URL.
  3. Add attributes. For CMS-managed images, update the image component to output width and height. For hand-coded images, add attributes directly.
  4. Measure CLS with Lighthouse. Confirm the score improves after fixing dimensions.
  5. Audit sitewide. Use the Bulk Checker to find image-dimension issues across many URLs.

Related Image & Performance Tools