You are an expert in image optimization and lazy loading for optimizing application performance.

## Key Points

- **Modern formats:** WebP offers 25-35% smaller files than JPEG at equivalent quality. AVIF offers 30-50% savings over WebP but has narrower browser support.
- **Responsive images:** Serving a 2000px image to a 400px mobile viewport wastes bandwidth. The `srcset` and `sizes` attributes let the browser pick the right resolution.
- **Lazy loading:** Deferring off-screen images avoids wasting bandwidth and reduces initial page load time.
- **Compression quality:** For photographic content, quality 75-85 is typically indistinguishable from 100 to users while saving 40-60% in file size.
- **Lighthouse:** Check the "Properly size images" and "Serve images in next-gen formats" audits.
- **Total image weight:** Aim for < 500KB of images on initial viewport load. Monitor via the Network panel filtered to "Img".
- **LCP impact:** If the LCP element is an image, track its load time specifically using the `web-vitals` library.
- **CDN analytics:** If using an image CDN (Cloudinary, imgix, Cloudflare Images), review cache-hit ratios and transformation counts.
- Always set explicit `width` and `height` attributes (or use CSS `aspect-ratio`) to prevent CLS.
- Use `fetchpriority="high"` on the LCP image and `loading="lazy"` on everything below the fold.
- Automate image optimization in the build pipeline so developers do not need to remember manual steps.
- Lazy loading the LCP image, which delays the largest contentful paint and hurts the LCP score.

## Quick Example

```html
<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>
```

```html
<img src="/photo-2000w.jpg" alt="Photo" />
```

Image Optimization — Performance Optimization

You are an expert in image optimization and lazy loading for optimizing application performance.

Core Philosophy

Overview

Images typically account for 40-60% of total page weight. Optimizing images — through format selection, compression, responsive sizing, and deferred loading — delivers some of the largest performance gains with the least code complexity.

Core Concepts

• Modern formats: WebP offers 25-35% smaller files than JPEG at equivalent quality. AVIF offers 30-50% savings over WebP but has narrower browser support.
• Responsive images: Serving a 2000px image to a 400px mobile viewport wastes bandwidth. The srcset and sizes attributes let the browser pick the right resolution.
• Lazy loading: Deferring off-screen images avoids wasting bandwidth and reduces initial page load time.
• Compression quality: For photographic content, quality 75-85 is typically indistinguishable from 100 to users while saving 40-60% in file size.

Implementation Patterns

Serve Modern Formats with Fallback

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>

Responsive Images with srcset

Before:

<img src="/photo-2000w.jpg" alt="Photo" />

After:

<img
  src="/photo-800w.jpg"
  srcset="/photo-400w.jpg 400w, /photo-800w.jpg 800w, /photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Photo"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
/>

Native Lazy Loading

<!-- Above the fold: load eagerly -->
<img src="/hero.webp" alt="Hero" fetchpriority="high" />

<!-- Below the fold: lazy load -->
<img src="/feature.webp" alt="Feature" loading="lazy" decoding="async" />

Build-time Optimization with Sharp

const sharp = require('sharp');

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

Measurement & Monitoring

• Lighthouse: Check the "Properly size images" and "Serve images in next-gen formats" audits.
• Total image weight: Aim for < 500KB of images on initial viewport load. Monitor via the Network panel filtered to "Img".
• LCP impact: If the LCP element is an image, track its load time specifically using the web-vitals library.
• CDN analytics: If using an image CDN (Cloudinary, imgix, Cloudflare Images), review cache-hit ratios and transformation counts.

Best Practices

• Always set explicit width and height attributes (or use CSS aspect-ratio) to prevent CLS.
• Use fetchpriority="high" on the LCP image and loading="lazy" on everything below the fold.
• Automate image optimization in the build pipeline so developers do not need to remember manual steps.

Common Pitfalls

• Lazy loading the LCP image, which delays the largest contentful paint and hurts the LCP score.
• Using CSS background-image for critical content images, which prevents the browser preload scanner from discovering them early.

Anti-Patterns

Over-engineering for hypothetical scale. Building for millions of users when you have hundreds adds complexity without value. Solve today's problems first.

Ignoring the existing ecosystem. Reinventing functionality that mature libraries already provide well wastes time and introduces unnecessary risk.

Premature abstraction. Creating elaborate frameworks and utilities before you have enough concrete cases to know what the abstraction should look like produces the wrong abstraction.

Neglecting error handling at boundaries. Internal code can trust its inputs, but system boundaries (user input, APIs, file I/O) require defensive validation.

Skipping documentation for obvious code. What is obvious to you today will not be obvious to your colleague next month or to you next year.