Skip to content
ImageZap

Developer tool

Website image audit

Type the address of any page and in a few seconds you'll see the weight and format of every image, the issues affecting LCP and CLS, and how much you'd save with WebP or AVIF.

Analyzes the page's public HTML. We don't store the URL or the result.

What the audit checks

Images are often more than half of a web page's weight and, in most cases, the element that determines LCP (Largest Contentful Paint), the hardest Core Web Vitals metric to pass. Even so, reviewing every image on a page one by one with browser DevTools is tedious.

This audit downloads the HTML of the URL you provide, finds every <img> tag (including those using <picture>, srcset or lazy-loading plugins with data-src), measures each image and checks eight specific issues:

  1. LCP image with loading="lazy": the mistake that hurts LCP the most.
  2. LCP image without priority: no fetchpriority="high" and no <link rel="preload">.
  3. Heavy images: over 200 KB (and over 500 KB as a severe issue).
  4. Legacy formats: JPEG or PNG over 100 KB without a WebP or AVIF alternative.
  5. Missing width and height: causes layout shifts (CLS).
  6. No srcset: phones download the same image as desktops.
  7. Offscreen images without lazy loading: they compete with the main image.
  8. Missing alt attribute: affects accessibility and image SEO.

From all that it computes a score from 0 to 100 and an estimate of the savings if JPEG and PNG images were served in modern formats.

How to use it

  1. Type or paste the full page URL, e.g. https://yoursite.com/product/sneakers. It analyzes that page only, not the whole site, so also test your key templates: home page, product page, blog post.
  2. Click Analyze images. It takes 3 to 10 seconds depending on the number of images and the server's speed.
  3. Review What to improve: issues are sorted by severity, each with an explanation and a link to the guide that explains how to fix it.
  4. Scroll to Analyzed images for the details of each file: format, weight, declared dimensions and warnings.
  5. Use Copy report link to share it with your team or client: the link re-runs the audit for the same URL.

How to read the results

The score

It starts at 100 and subtracts points for each issue, capped per type so a single category can't sink the score. A page scoring 90 or more handles images well; 50 to 89 means there are clear, quick wins; below 50, images are seriously dragging performance down.

It isn't the Lighthouse score and doesn't replace it: Lighthouse measures real loading in a simulated browser, while this audit reviews markup and files. They're complementary, and the issues this audit finds are among those that raise the Lighthouse score the most when fixed.

The "likely LCP" image

The audit flags as likely LCP the first content image in the document, skipping logos, icons and SVGs. It's right on most home pages, product pages and articles, but if your main image is a CSS background or rendered by JavaScript, it won't see it. To confirm, open Chrome DevTools, Performance tab, and look for the LCP marker.

Estimated savings

It applies the average savings of WebP (≈30%) and AVIF (≈50%) at equivalent visual quality to each flagged JPEG or PNG image. It's a ballpark: an already heavily compressed photo will save less, and an unoptimized PNG export can save more than 80%. For the exact figure, run the images through the ImageZap optimizer and compare.

How to fix the most common issues

The LCP image is lazy-loaded. Very common in WordPress themes and components that apply loading="lazy" to every image. Remove it from the main image and add priority:

<img src="/hero.avif" width="1600" height="900" alt="…" fetchpriority="high">

Legacy formats. Convert images to AVIF with WebP and JPEG fallbacks and serve them with <picture>. The optimizer generates all three formats at once and gives you the code; we cover it in depth in the <picture> and fallbacks guide.

Missing width and height. Add the file's real dimensions. The image stays responsive if your CSS has max-width: 100%; height: auto;, and the browser can reserve the slot before downloading it.

Heavy images without srcset. Generate 640, 1280 and 1920 px variants and declare srcset and sizes. The responsive images guide has examples for the most common layouts.

Limitations

  • Server HTML only. JavaScript isn't executed. On sites built only with React, Vue or Angular without server rendering, images aren't in the HTML and the audit will tell you.
  • No CSS analysis. Background images (background-image) aren't included.
  • Up to 40 images per page. The first ones in the document are the ones that matter most for loading.
  • Sites that block bots. Some firewalls (Cloudflare in strict mode, for example) reject automated requests. You'll see a connection error in that case.

Privacy and security

To analyze the page, our server downloads its public HTML and checks the size of each image, just like a browser would. We don't store the URL or the result: the report is computed, sent to your browser and discarded (the CDN may cache the response for a few minutes to avoid repeating the audit). Only public addresses can be analyzed: private, local and intranet IPs are blocked.

Frequently asked questions

Is it free? Is there a limit?

It's free with no sign-up. To prevent abuse there's a limit of a few audits per minute from the same connection, more than enough for normal use.

Why is the result different from PageSpeed Insights?

PageSpeed Insights loads the page in a browser and measures real timings (or real-user data). This audit reviews markup and image files. Many recommendations overlap, but the scores aren't comparable.

Can I audit a site on localhost or my intranet?

No. For security, only public addresses on ports 80 and 443 are accepted. For local environments, use Lighthouse in Chrome DevTools.

Why do some images show "unknown size"?

Because that image's server doesn't report its size in the headers or rejected the request. It happens with some image CDNs and servers with bot protection.

Does it detect images loaded with JavaScript?

No, only those present in the HTML returned by the server. If your site uses server rendering (Next.js, Nuxt, Astro, WordPress…), they'll all be there.

How do I optimize the images it flags?

Download them, drop them into the optimizer and generate AVIF and WebP with the <picture> code included. Everything runs in your browser.

Related tools

Related guides