image-optimization

Image Optimization

Optimize images for web performance with modern formats and responsive techniques.

Format Selection

| Format | Best For | Compression | |--------|----------|-------------| | JPEG | Photos | Lossy, 50-70% reduction | | PNG | Icons, transparency | Lossless, 10-30% | | WebP | Modern browsers | 25-35% better than JPEG | | AVIF | Next-gen | 50% better than JPEG | | SVG | Logos, icons | Vector, scalable |

Responsive Images

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img
    src="image.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Description"
    loading="lazy"
    decoding="async"
  >
</picture>

Lazy Loading

<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- With blur placeholder -->
<img
  src="placeholder-blur.jpg"
  data-src="image.jpg"
  class="lazy"
  alt="Description"
>

Build Pipeline (Sharp)

const sharp = require('sharp');

async function optimizeImage(input, output) {
  await sharp(input)
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(output);
}

Performance Targets

| Asset Type | Target Size | |------------|-------------| | Hero image | <200KB | | Thumbnail | <30KB | | Total images | <500KB |

Optimization Checklist

• [ ] Use WebP with JPEG fallback
• [ ] Implement responsive srcset
• [ ] Enable lazy loading for below-fold
• [ ] Compress at quality 70-85
• [ ] Serve from CDN
• [ ] Set proper cache headers