Skip to content
Rankora
EN
Sign in
All toolsTechnical SEOOn-Page SEOKeyword ResearchSERP & RankingsBacklinksSchema & JSON-LDSitemaps & RobotsPerformanceInternational SEOGEO / AI SearchGoogle Search ConsoleASO / App StorePricing
Free · runs in your browser

Image Dimension Analyzer

Check that every image declares its dimensions and responsive versions, and optionally compare the real file size with the size shown on the page.

Privacy and cost

This tool runs in your browser. What you type or paste is not sent to our servers and it costs nothing to use.

How it works

  1. Paste your page HTML; the <img> elements are read in your browser.
  2. The tool flags missing width/height, non-numeric values, srcset without sizes, missing srcset and the formats detected (including <picture>).
  3. Optional: click "Load images and measure". Your browser downloads the first N images (20 by default, 50 at most) to read their natural size and compare it with the attributes.
  4. Images more than twice too large, stretched or with the wrong aspect ratio are flagged; export everything as CSV.

Example

Four images: hero.jpg (1200×600) has a w-descriptor srcset without sizes; product.webp has no width, no height and no srcset; logo.svg (120×32) is fine; banner.jpg sits in a <picture> with an AVIF source and a sizes attribute. Result: 3 of 4 images declare their dimensions (75%), 1 srcset without sizes, 2 images with srcset or <picture>.

What the result means

Without width and height (or aspect-ratio) the browser cannot reserve space before the file arrives, so the page jumps and CLS suffers. Natural size can only be measured in the browser; the "more than 2x" rule allows for high-density screens and is this tool's own convention. Sizes set in an external stylesheet are not visible from the HTML alone.

Common problems this tool helps with

  • Images with no dimensions that shove content around while loading and hurt CLS.
  • A srcset with w descriptors but no sizes attribute, which makes the browser assume 100vw.
  • 4000px photos downloaded to be shown at 400px, especially on mobile.
  • Percentage or "auto" values in the attributes, which reserve nothing.

Frequently asked questions

Why width and height when CSS controls the size?

Browsers use the two attributes to work out the aspect ratio before the file loads. Your CSS can still resize the image (for example max-width: 100%; height: auto) without losing that reserved space.

Do the images load through your servers?

No. Your own browser downloads the images from their servers, just like on the original page. Some hosts block access from other sites, in which case the image shows as "could not load".

Why is a file twice as large accepted?

On high-density screens an image displayed at 300px looks sharp with a file about 600px wide. Beyond that, the tool assumes pixels are being downloaded for nothing.

When should I use srcset?

When an image is wider than about 300px and served to varied screens. srcset lets the browser pick the right version for the screen, and sizes tells it how wide the image will be.

Related tools