Skip to content
SEO Madmanby Adam Hafez
Free tool

Image lazy loading and width/height checker

Image lazy loading checker: paste HTML to test every img tag for width and height, lazy loading on the likely LCP image. Free, runs in your browser.

Runs entirely in your browser. Nothing you enter is uploaded, logged or stored.

The dimension and lazy-loading rules follow web.dev guidance. Treating the first image as the likely LCP image is this tool's own heuristic. Nothing you paste is sent anywhere.

Key takeaways

  • web.dev recommends adding width and height attributes to all img tags so the browser can reserve space and avoid disruptive layout shifts.
  • web.dev advises against lazy-loading images likely to be in the viewport at page load, especially the largest contentful paint image.
  • The loading attribute has two values, lazy and eager, and eager is the same as leaving the attribute out.
  • Which image is above the fold cannot be known from markup alone, so this tool treats the first image as the likely candidate and says so.
  • This checker reads only the HTML typed in and cannot measure real layout shift or which image is your actual LCP element.

What it takes

  • Pasted HTML containing img tags

More tools

All of them free, all of them browser-only.

Browse the tools

How to use it

  1. 1Paste the HTMLCopy the markup for the page or template section containing the images, including every img tag.
  2. 2Add width and heightGive each flagged image integer width and height attributes matching its intrinsic size, so space is reserved before it loads.
  3. 3Remove lazy from the first imageDelete loading="lazy" from the hero or first visible image, which is the likely LCP element.
  4. 4Keep lazy for below-the-fold imagesLeave loading="lazy" on images far down the page, but only once they also carry dimensions.
  5. 5Confirm with a real measurementCheck the largest contentful paint element in a lab tool, since this checker only estimates it from position in the markup.

Missing dimensions and misplaced lazy loading fail in different ways. Without width and height the browser cannot reserve space, so content jumps when the image arrives. Lazy loading on an image that is visible at load delays the very element largest contentful paint measures. web.dev covers both in its guide to browser-level lazy loading, and this checker tests both on every img tag you paste.

What this image lazy loading checker tests

The checker finds each <img> tag in the pasted HTML, reads its attributes and applies five rules:

  • Width and height present (warning if not). Both must be positive whole numbers. web.dev recommends adding width and height “to all <img> tags” to reserve space and avoid layout shift.
  • Valid loading value (problem if not). The attribute takes lazy or eager. web.dev describes eager as the browser default, the same as leaving the attribute out. Any other value is flagged.
  • No lazy loading on the first image (problem). web.dev says: “Don’t lazy-load images that are likely to be in-viewport when the page loads, especially LCP images.” The checker treats the first img tag as the likely LCP image. That position rule is its own heuristic, and the flag says so.
  • No lazy image without dimensions (problem). web.dev warns that lazy loading makes dimensions more important, because an image without them starts at 0 by 0 pixels until it loads.
  • A src or srcset (problem if neither). An img tag with neither has nothing to load.

How to read the results

A summary line counts the images found and how many carry flags. Each image then gets a card named by its src (or srcset) and a badge: Pass with no flags, Warning when the only flag is missing dimensions, and Problem when any rule marked as a problem fails. Each flag is listed under the badge in plain words.

Work through Problem cards first. Remove loading="lazy" from the hero, add dimensions to lazy images, and correct any misspelled loading value. Then add width and height to the Warning cards. Browsers start fetching lazy images before they scroll into view: web.dev gives 1250px from the viewport on 4G and 2500px on 3G or slower connections, so lazy loading costs little for images well down the page.

Worked example

The checker opens with this markup:

<img src="/hero.jpg" alt="Team at a desk" loading="lazy" width="1200" height="630">
<img src="/chart.png" alt="Traffic chart" width="800" height="450" loading="lazy">
<img src="/logo.svg" alt="Logo">
<img src="/photo.jpg" alt="Office" loading="lazy">

The summary reads “4 images found, 3 with flags.” /hero.jpg is a Problem: it has dimensions, but it is the first image and is lazy-loaded. /chart.png passes, since it is lazy, sized and not first. /logo.svg is a Warning for missing width and height. /photo.jpg is a Problem with two flags: no dimensions, and lazy-loaded without dimensions. Deleting loading="lazy" from the hero and adding integer width and height to the logo and photo turns all four cards to Pass.

Common mistakes it catches

  • A template that lazy-loads every image. A blanket loading="lazy" often reaches the hero too. That is the in-viewport case web.dev singles out.
  • Images sized only in CSS. Without width and height attributes in the HTML, the browser has nothing to reserve space from before the stylesheet and image arrive.
  • Units inside the attributes. width="800px" or width="100%" fail the integer rule here. Put the pixel size in the attribute and control display size with CSS.
  • Typos in the loading value. Something like loading="lazyload" is not a native value, so the browser does not apply the lazy loading you intended.

What markup cannot tell you: the real LCP element depends on viewport size and layout. Confirm it in a lab tool before you rely on the first-image heuristic. The parsing runs in your browser and nothing you paste is sent anywhere.

Sources

  1. 1.Browser-level image lazy-loading for the web - web.devPrimary

Frequently asked questions

Why is the first image flagged if it is lazy-loaded?

web.dev says not to lazy-load images likely to be in the viewport at load, especially the LCP image, and the first image in the markup is the most likely candidate. If your first img tag is really below the fold, such as a footer logo placed early in the source, the flag is a false positive.

Should I lazy-load every image below the fold?

web.dev recommends loading="lazy" only for images outside the initial viewport. Give those images width and height as well, since a lazy image without dimensions is the combination this checker marks as a problem.

Does loading="lazy" hurt in browsers that do not support it?

No. web.dev says browsers that do not support the attribute ignore it, so they miss the benefit but take no penalty. It lists support in Chrome 77, Edge 79, Firefox 121 and Safari 16.4 onward.

Are percentage widths accepted?

No. This tool expects positive integers for width and height, such as width="800", and flags anything else, including "100%" or "800px", as a warning. That strictness is its own conservative rule. Set the intrinsic pixel size in the attributes and scale with CSS.

Can I lazy-load a CSS background image with this attribute?

No. web.dev says the loading attribute works only on img tags (and on iframes), not on CSS background images, which is why this checker only reads img tags.

Does this replace the alt text checker?

No. This tool checks loading and dimension attributes only. The image alt text checker covers missing, empty and generic alt text separately.