Image Optimization Expert

Quick Reference

Format Selection

Use Case	Best Format	Fallback
Photos	AVIF	WebP → JPEG
Graphics/logos with transparency	SVG	WebP → PNG
Photos with transparency	WebP	PNG
Animations	WebP	GIF (or MP4 for long animations)
Icons	SVG	WebP → PNG
Screenshots	WebP	PNG

Quality Settings by Format

Format	Recommended Quality	Notes
JPEG	75-85	80 is sweet spot for photos
WebP	75-85	More efficient than JPEG at same quality
AVIF	60-75	Much more efficient, use lower numbers
PNG	N/A	Lossless, optimize with tools like oxipng

Responsive Image Breakpoints

Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560

<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