Most websites have image problems they don't know about. Unoptimized images quietly slow down every page load, hurt Core Web Vitals scores, and cost your users bandwidth — all without any visible sign of a problem. A systematic image audit fixes this.
This guide walks through exactly how to audit images on any website, what to look for, and how to prioritize fixes.
Step 1: Run an Automated Scan with Image Inspector
The fastest way to get a complete picture of your image landscape is to use Image Inspector. Install it from the Chrome Web Store, navigate to the page you want to audit, and click Scan Page.
Within a few seconds, you'll see:
- Every image on the page (img tags, picture elements, CSS backgrounds)
- The actual file size of each image in KB or MB
- Natural dimensions vs display dimensions
- Format (JPEG, PNG, WebP, AVIF, SVG)
- Whether alt text is present
- Whether lazy loading is set
- Whether srcset is used
- Potential savings per image
This gives you a prioritized list sorted by savings potential — so you know exactly where to start.
Step 2: Identify Critical Issues First
Image Inspector categorizes issues into Critical (red) and Warnings (yellow). Start with critical issues — these have the highest impact and are often easy wins.
Critical issue priority order:
- Files over 500 KB: These are almost always uncompressed or unoptimized. A single image this size can single-handedly fail your LCP score.
- Images served 2× larger than displayed: A 2000px image displayed at 500px means you're downloading 4× the pixels you need. Resizing this image saves ~75% of the file size.
- JPEG/PNG images that should be WebP/AVIF: Every photo that isn't WebP or AVIF is an opportunity to save 30–55% of bandwidth.
- Missing alt text: While not a direct speed issue, missing alt text is an accessibility violation and a missed SEO opportunity. Search engines use alt text to understand image content.
Step 3: Check Your LCP Image Specifically
Your LCP (Largest Contentful Paint) element is usually the biggest image above the fold — typically a hero banner or featured photo. This single image has more impact on your Core Web Vitals score than everything else combined.
For your LCP image, verify:
- It is not lazy loaded (
loading="lazy"would delay it) - It has
fetchpriority="high"so the browser loads it first - It is served in WebP or AVIF format
- Its natural dimensions closely match its display size (ideally within 1.5×)
- It is under 150–200 KB
Step 4: Review Below-Fold Images
After your critical fixes, look at images further down the page. The key checks here are:
- Missing lazy loading: Any below-fold image without
loading="lazy"is wasting bandwidth on users who may never scroll there. - Missing srcset: Without srcset, mobile users get the same large image as desktop users. A 1200px image displayed at 375px on mobile is downloading 10× more pixels than needed.
- CSS background images: These often escape optimization attention. Image Inspector scans computed CSS styles to find and flag these.
Step 5: Export the Report and Prioritize
Image Inspector's CSV export gives you a structured spreadsheet with every image, its current size, issues, and potential savings. Use this to:
- Share findings with your development team or client
- Sort by savings potential to find the highest-impact images
- Track progress as you fix each image over time
- Document the before/after state for reporting
Step 6: Implement Fixes
For most images, the fix involves three actions:
- Convert format: Use Squoosh, Cloudinary, or your CMS's built-in optimization to convert JPEG/PNG images to WebP or AVIF
- Resize: Never upload images larger than they need to be. If the maximum display size is 800px, export at 1600px (for retina) and no larger
- Update HTML attributes: Add
loading="lazy"to below-fold images,fetchpriority="high"to your LCP image, and always setwidthandheight