Image Optimization Audit Template with Auditite

Overview

Images typically account for 40-60% of a web page’s total weight. Unoptimized images slow page loads, hurt Core Web Vitals scores, and waste bandwidth. This template provides a systematic approach to auditing and optimizing images across your entire site.

Image Format Selection Guide

Format	Best For	Compression	Browser Support	Recommendation
WebP	Photos, illustrations, icons	Lossy + lossless, 25-35% smaller than JPEG	97%+ browsers	Default choice for most images
AVIF	Photos, complex images	50% smaller than JPEG	92%+ browsers	Use with WebP fallback
JPEG	Photos (fallback)	Lossy only	Universal	Fallback for older browsers
PNG	Transparency, screenshots	Lossless	Universal	Only when transparency is needed
SVG	Icons, logos, illustrations	Vector (infinite scale)	Universal	Always for icons and logos

Compression Targets

Image Type	Target Quality	Max File Size	Max Dimensions
Hero/banner images	80-85% quality	200 KB	1920px wide
Content images	75-85% quality	150 KB	1200px wide
Thumbnails	70-80% quality	50 KB	400px wide
Product images	80-90% quality	200 KB	1200px wide
Background images	60-75% quality	150 KB	1920px wide
Icons/logos	Lossless (SVG)	10 KB	N/A (vector)

Image Audit Worksheet

URL	Image URL	Current Format	Size (KB)	Dimensions	Has Alt Text	Lazy Loaded	Score	Action
					Yes/No	Yes/No	/10

Image Scoring Rubric

Factor	Score (0-2)	Criteria
Format		0 = BMP/TIFF, 1 = JPEG/PNG, 2 = WebP/AVIF
File size		0 = Over 500KB, 1 = 200-500KB, 2 = Under 200KB
Dimensions		0 = Oversized for container, 1 = Close, 2 = Matches display size
Alt text		0 = Missing, 1 = Generic, 2 = Descriptive and keyword-relevant
Lazy loading		0 = Not lazy loaded (below fold), 1 = Partial, 2 = Properly implemented

Total Score: /10 per image. Images scoring below 6 need immediate optimization.

Alt Text Guidelines

Type	Good Example	Bad Example
Product image	”Blue running shoe, Nike Air Max 270, side view"	"shoe” or “IMG_4532.jpg”
Blog illustration	”Bar chart showing Core Web Vitals scores before and after optimization"	"chart” or “image”
Decorative image	alt="" (empty alt, not missing)	“decorative divider”
Infographic	”Infographic: 10 steps to technical SEO audit” + long description	”infographic”
Screenshot	”Google Search Console performance report showing 50% traffic increase"	"screenshot”

Responsive Image Checklist

• srcset attribute provides multiple image sizes
• sizes attribute specifies image width at different breakpoints
• Art direction uses <picture> element for different crops
• Retina displays served 2x images (only where needed)
• Image dimensions (width and height attributes) are set to prevent CLS

Lazy Loading Implementation

Element	Implementation	Priority
Above-the-fold images	loading="eager" or no attribute	Load immediately
Below-the-fold images	loading="lazy"	Load on scroll
Background images	CSS content-visibility: auto or Intersection Observer	Load on scroll
Iframe embeds (YouTube, maps)	loading="lazy"	Load on scroll

Critical rule: Never lazy-load the LCP (Largest Contentful Paint) image. This is usually the hero image or first content image.

CDN and Delivery

Check	Status	Notes
Images served from CDN
CDN auto-format (WebP/AVIF)
CDN auto-resize
Cache headers set (1 year for hashed URLs)
HTTP/2 or HTTP/3 enabled

Bulk Optimization Process

1. Crawl your site to inventory all images (Auditite provides this automatically)
2. Export the list with URLs, sizes, formats, and alt text status
3. Score each image using the rubric above
4. Prioritize images on high-traffic pages first
5. Convert to WebP/AVIF with appropriate quality settings
6. Add or improve alt text for all images scoring 0-1
7. Implement lazy loading for below-fold images
8. Add width and height attributes to prevent layout shift
9. Set up responsive images with srcset and sizes
10. Re-audit after changes to verify improvements

Auditite automatically detects oversized images, missing alt text, incorrect lazy loading, and missing responsive image attributes during every site audit.