The Complete Image Optimization Checklist for 2026

A step-by-step checklist to optimize every image on your website. Follow this guide to achieve perfect Core Web Vitals scores.

Why This Checklist Matters

Images account for 50% of average webpage weight. Proper optimization can: - Reduce load time by 70% - Improve SEO rankings - Increase conversions by 7% - Save bandwidth costs

✅ Pre-Upload Checklist

1. Choose Right Format

[ ] Photos: Use WebP (85% quality)
[ ] Graphics with transparency: Use WebP or PNG
[ ] Logos/icons: Use SVG
[ ] Animated: Use WebP or MP4 (not GIF)

2. Resize for Web

[ ] Hero images: Max 1920px wide
[ ] Content images: Max 800px wide
[ ] Thumbnails: Max 400px wide
[ ] Mobile: Provide smaller versions

3. Compress Images

[ ] Use 80-85% quality for photos
[ ] Test at different quality levels
[ ] Verify no visible artifacts
[ ] Target < 100KB per image

4. Remove Metadata

[ ] Strip EXIF data (unless needed)
[ ] Remove GPS coordinates
[ ] Keep copyright info if required

✅ Implementation Checklist

5. HTML Markup

<!-- ✅ Correct -->
<img
  src="image.webp"
  alt="Descriptive text for accessibility"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

<!-- ❌ Wrong -->
<img src="image.jpg">

[ ] Always include alt attribute
[ ] Add width and height (prevents CLS)
[ ] Use loading="lazy" for below-fold images
[ ] Add decoding="async" for non-critical images

6. Responsive Images

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

[ ] Implement <picture> element
[ ] Provide AVIF for modern browsers
[ ] Provide WebP for most browsers
[ ] Keep JPEG/PNG fallback

7. srcset for Different Sizes

<img
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w
  "
  sizes="(max-width: 600px) 400px, 800px"
  src="image-800.webp"
  alt="Responsive image"
>

[ ] Create 3-4 size variants
[ ] Define appropriate sizes attribute
[ ] Test on mobile devices

✅ Performance Checklist

8. Lazy Loading

[ ] Use native loading="lazy"
[ ] Exclude above-fold images
[ ] Test placeholder behavior
[ ] Verify no layout shift

9. Preload Critical Images

<link rel="preload" as="image" href="hero.webp">

[ ] Preload hero/LCP image
[ ] Use for above-fold images
[ ] Don't overuse (max 2-3)

10. CDN Configuration

[ ] Enable image transformation
[ ] Set up WebP/AVIF auto-conversion
[ ] Configure proper caching headers
[ ] Enable compression (Brotli/gzip)

✅ Quality Assurance Checklist

11. Test Page Speed

[ ] Run Google PageSpeed Insights
[ ] Check Core Web Vitals
[ ] Test on mobile (3G simulation)
[ ] Compare before/after

12. Verify Visual Quality

[ ] Check on different screens
[ ] Verify no compression artifacts
[ ] Test color accuracy
[ ] Review on retina displays

13. Accessibility Check

[ ] All images have alt text
[ ] Decorative images use alt=""
[ ] Complex images have descriptions
[ ] Test with screen reader

✅ Maintenance Checklist

14. Regular Audits

[ ] Monthly image audit
[ ] Check for new unoptimized images
[ ] Review Core Web Vitals trends
[ ] Update to newer formats when available

15. Automation

[ ] Set up CI/CD image optimization
[ ] Automate WebP conversion
[ ] Configure build-time processing
[ ] Monitor performance regressions

📊 Target Metrics

Metric	Good	Needs Work	Poor
LCP	< 2.5s	2.5-4s	> 4s
CLS	< 0.1	0.1-0.25	> 0.25
Image weight	< 1MB	1-2MB	> 2MB
Image count	< 20	20-50	> 50

🛠️ Free Tools

Online Tools

Tool	Use Case	Link
Imagic AI	All-in-one optimization	imagic-ai.com
Squoosh	Single image	squoosh.app
PageSpeed Insights	Performance test	pagespeed.web.dev

CLI Tools

# Convert to WebP
cwebp input.png -q 85 -o output.webp

# Batch resize
mogrify -resize 800x *.jpg

# Compress
imagemagick convert input.jpg -quality 85 output.jpg

📅 Implementation Timeline

Week 1: Quick Wins

[ ] Day 1-2: Convert top 20 images to WebP
[ ] Day 3-4: Add lazy loading
[ ] Day 5: Run PageSpeed test
[ ] Weekend: Document improvements

Week 2: Deep Optimization

[ ] Day 1-2: Implement responsive images
[ ] Day 3-4: Set up CDN
[ ] Day 5: Configure caching
[ ] Weekend: Performance audit

Week 3: Automation

[ ] Day 1-3: Set up CI/CD pipeline
[ ] Day 4-5: Write documentation
[ ] Weekend: Team training

🎯 Quick Start (5 Minutes)

If you only have 5 minutes, do this:

Upload images to Imagic AI
Select Compressor tool
Download optimized images
Replace on your website
Test with PageSpeed Insights

Expected improvement: 50-70% smaller images

📈 Results Tracking

Track these metrics weekly:

Week 1:
- Image weight: ____ MB
- LCP: ____ s
- PageSpeed score: ____/100

Week 2:
- Image weight: ____ MB
- LCP: ____ s
- PageSpeed score: ____/100

Week 3:
- Image weight: ____ MB
- LCP: ____ s
- PageSpeed score: ____/100

Conclusion

Image optimization doesn't have to be complicated. Follow this checklist and you'll see immediate improvements in page speed and user experience.

Start today with free tools like Imagic AI and track your progress.

Need help optimizing? Try our free Image Tools - no signup required!