Last updated
Image Optimization Analysis Report
The Image Optimization Analyzer evaluates images for performance issues and provides specific recommendations. Here is a sample analysis report:
/* Analysis report for https://example.com */
Images analyzed: 18
Total image weight: 4.2 MB
Potential savings: 2.8 MB (67% reduction)
CRITICAL ISSUES:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
hero-banner.jpg
Current size: 1.8 MB (3840×2160px)
Display size: 1200×675px (CSS)
Issue: Image is 9.2× larger than display size
Recommendation: Resize to 1200×675px (2400×1350px for 2x)
Potential saving: 1.4 MB (78% reduction)
Priority: HIGH — this is the LCP element
product-photo-1.png
Current size: 890 KB (PNG-24)
Issue: Photo saved as PNG — JPEG would be smaller
Recommendation: Convert to JPEG quality 85 or WebP
Potential saving: 650 KB (73% reduction)
Priority: HIGH
WARNINGS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
team-photo.jpg
Current size: 420 KB
Issue: No srcset attribute — all devices download same size
Recommendation: Add srcset with 320w, 640w, 1024w versions
Potential saving: 280 KB for mobile users (67% reduction)
blog-thumbnail.jpg
Current size: 180 KB
Issue: Missing loading="lazy" attribute
Recommendation: Add loading="lazy" (below the fold)
Impact: Reduces initial page load by 180 KBFormat Optimization Recommendations
The analyzer checks whether each image uses the optimal format:
/* Format decision matrix */
Image type Best format Why
---------------------- ------------- ----------------------------------
Photograph WebP > JPEG WebP: 30% smaller than JPEG
Photo with transparency WebP > PNG WebP supports transparency + better compression
Logo/icon (no photo) SVG > PNG SVG: infinitely scalable, tiny file
Screenshot with text PNG > JPEG PNG: lossless, text stays sharp
Animated content WebP > GIF WebP animation: 64% smaller than GIF
Simple graphic PNG-8 > PNG-24 PNG-8: 80% smaller for limited colors
/* Format conversion savings examples */
hero.jpg (JPEG, 85): 142 KB
hero.webp (WebP, 80): 98 KB → 31% smaller
logo.png (PNG-24): 89 KB
logo.svg: 4 KB → 96% smaller
animation.gif: 1.2 MB
animation.webp: 430 KB → 64% smaller
/* Implementing format selection with picture element */
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" width="1200" height="675">
</picture>
/* Browser picks the first format it supports */
/* AVIF → WebP → JPEG fallback chain */Dimension Optimization
Serving images at their actual display size is often the biggest optimization opportunity:
/* Oversized image analysis */
Image: hero-banner.jpg
File dimensions: 3840×2160px (4K resolution)
Display dimensions: 1200×675px (CSS max-width)
Pixel ratio: 1x display (standard monitor)
Optimal dimensions: 1200×675px (1x)
2400×1350px (2x for Retina)
Current file size: 1.8 MB
Optimal file size: 145 KB (1200×675px, JPEG 85)
Savings: 1.655 MB (92% reduction!)
/* Responsive image implementation */
<img
src="hero-1200w.jpg"
srcset="
hero-600w.jpg 600w,
hero-1200w.jpg 1200w,
hero-2400w.jpg 2400w
"
sizes="
(max-width: 600px) 600px,
(max-width: 1200px) 1200px,
2400px
"
alt="Hero banner"
width="1200"
height="675">
/* Result: mobile users download 600w (45 KB) instead of 1.8 MB */
/* Desktop users download 1200w (145 KB) instead of 1.8 MB */Core Web Vitals Impact
Image optimization directly affects Google's Core Web Vitals metrics:
/* LCP (Largest Contentful Paint) — most impacted by images */
Before optimization:
LCP element: hero-banner.jpg (1.8 MB)
LCP time: 4.2 seconds ← Poor (>4s)
LCP score: Poor
After optimization:
LCP element: hero-banner.webp (98 KB, srcset)
LCP time: 1.1 seconds ← Good (<2.5s)
LCP score: Good
/* Optimization techniques for LCP */
1. Preload the LCP image
<link rel="preload" as="image" href="hero.webp" type="image/webp">
2. Avoid lazy loading the LCP image
<img src="hero.jpg" loading="eager" fetchpriority="high"> ← NOT lazy
3. Use correct image dimensions (no layout shift)
<img src="hero.jpg" width="1200" height="675"> ← always specify dimensions
/* CLS (Cumulative Layout Shift) — caused by images without dimensions */
/* Images without width/height cause layout shifts as they load */
Bad (causes CLS):
<img src="product.jpg" alt="Product">
Good (prevents CLS):
<img src="product.jpg" alt="Product" width="400" height="400">Lazy Loading Implementation
The analyzer identifies images that should use lazy loading to improve initial page load:
/* Images above the fold — load immediately */
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">
/* Images below the fold — lazy load */
<img src="blog-post-1.jpg" alt="Blog post" loading="lazy">
<img src="blog-post-2.jpg" alt="Blog post" loading="lazy">
<img src="product-grid-1.jpg" alt="Product" loading="lazy">
/* Intersection Observer for custom lazy loading */
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, { rootMargin: '200px' }); // start loading 200px before visible
images.forEach(img => observer.observe(img));
/* Impact of lazy loading */
Page with 20 images, 10 below fold:
Without lazy loading: 4.2 MB initial load
With lazy loading: 1.8 MB initial load (57% reduction)
Remaining 2.4 MB loaded on scroll as needed