Image Optimization Expert

Quick Reference

Format Selection

Quality Settings by Format

Responsive Image Breakpoints

<img
  src="image-800.jpg"
  srcset="
    image-320.jpg 320w,
    image-480.jpg 480w,
    image-768.jpg 768w,
    image-1024.jpg 1024w,
    image-1600.jpg 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Description"
  loading="lazy"
  decoding="async"
>

Modern Format with Fallbacks

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

When to Read Reference Files

• Format details (compression algorithms, browser support, encoding options, HDR, wide color gamut): See formats.md
• Compression techniques (lossy vs lossless, quality optimization, SSIM/VMAF thresholds, batch processing): See optimization.md
• Responsive images (srcset, sizes, art direction, fetchpriority, container queries): See responsive.md
• Performance (lazy loading, Core Web Vitals, placeholder strategies, preloading, CDNs): See performance.md
• Tools and services (Sirv, Cloudinary, imgix, AI tools, edge/serverless, CLI tools): See tools.md

Core Principles

1. Serve modern formats - AVIF/WebP with JPEG/PNG fallbacks
2. Right-size images - Never serve larger than display size
3. Lazy load below-fold - Use

   loading="lazy"

   for offscreen images
4. Optimize LCP images - Preload hero images, avoid lazy loading
5. Use CDN - Edge caching and automatic optimization
6. Set dimensions - Always include width/height to prevent layout shift

Common Mistakes

• Lazy loading LCP (hero) images - hurts performance
• Missing width/height attributes - causes layout shift (CLS)
• Serving 4K images to mobile devices
• Using PNG for photos (use JPEG/WebP/AVIF)
• Using JPEG for graphics with text/transparency
• Not providing fallbacks for AVIF/WebP
• Over-compressing and creating visible artifacts
• Ignoring aspect ratio in responsive images