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

```html

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

```

[ ] 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

html <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

```html <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

html <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

```bash

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!