Storage & Application

Image Audit

Automatically scan every image in the previewed page for performance anti-patterns, missing attributes, oversized dimensions, and legacy formats.

Overview

Catching Every Image Problem

Images are the single largest contributor to slow page loads and layout shifts. A single unoptimized image can cost seconds of load time and crash your CLS score. The Image Audit panel automatically scans every <img> element in the live DOM and flags problems with specific, actionable recommendations.

  • Missing alt Text: Flags every image without an alt attribute. Critical for screen readers and also a factor in Google Image Search ranking.
  • Legacy Format Detection: Identifies images using PNG or JPEG where WebP or AVIF would yield 30–80% smaller file sizes without perceptible quality loss.
  • Missing loading="lazy": Flags below-the-fold images not using native lazy loading, which delays page ready time unnecessarily by downloading off-screen images immediately.
  • Oversized Natural Dimensions: Compares the image's natural (actual) dimensions to its displayed dimensions. A 4000×3000px image displayed at 100×75px wastes 99% of its bandwidth.
  • Missing width/height Attributes: Flags images without explicit dimensions. This is the #1 cause of Cumulative Layout Shift (CLS) — the browser doesn't know how much space to reserve, so the layout jumps when the image loads.
💡
Fix CLS by adding width and height first If your Core Web Vitals show a high CLS score, run the Image Audit and immediately fix every image flagged for missing width/height attributes. This is almost always the root cause and takes minutes to fix with dramatic CLS improvement.
Priority Fix Guide

What to Fix and Why

🔴

Missing width/height (CLS Fix)

Highest priority. Add explicit width and height to every <img> to eliminate layout shift. Takes minutes, yields massive CLS score improvement.

🟠

Missing alt text (A11y + SEO)

WCAG violation and SEO gap. Every image needs descriptive alt text for screen readers and Google Image indexing.

🟡

Missing lazy loading (LCP)

Add loading="lazy" to all below-the-fold images. Reduces initial page weight and speeds up LCP for above-the-fold content.

🟢

PNG/JPEG → WebP (Page Weight)

Convert legacy formats to WebP or AVIF. Reduces total page weight by 30–80% with no visible quality change.