Image Optimization

Production image optimization patterns for modern web applications.

Overview

• Optimizing Largest Contentful Paint (LCP)

• Reducing page weight and bandwidth

• Implementing responsive images

• Adding blur placeholders for perceived performance

• Converting to modern formats (AVIF, WebP)

Core Patterns

1. Next.js Image Component

import Image from 'next/image';

// Static import (recommended for static assets) import heroImage from '@/public/hero.jpg';

function Hero() { return ( <Image src={heroImage} alt="Hero banner" priority // Preload for LCP placeholder="blur" // Automatic blur placeholder quality={85} sizes="100vw" /> ); }

// Remote images <Image src="https://cdn.example.com/photo.jpg" alt="Remote photo" width={800} height={600} sizes="(max-width: 768px) 100vw, 800px" />

2. Responsive Images with Sizes

// Full-width hero <Image src="/hero.jpg" alt="Hero" fill sizes="100vw" style={{ objectFit: 'cover' }} />

// Sidebar image (smaller on large screens) <Image src="/sidebar.jpg" alt="Sidebar" width={400} height={300} sizes="(max-width: 768px) 100vw, 33vw" />

// Grid of cards <Image src={/products/${id}.jpg} alt={product.name} width={300} height={300} sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw" />

3. Blur Placeholders

// Static imports get automatic blur import photo from '@/public/photo.jpg'; <Image src={photo} alt="Photo" placeholder="blur" />

// Remote images need blurDataURL <Image src="https://cdn.example.com/photo.jpg" alt="Photo" width={800} height={600} placeholder="blur" blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..." />

// Generate blurDataURL at build time import { getPlaiceholder } from 'plaiceholder';

export async function getStaticProps() { const { base64 } = await getPlaiceholder('/public/photo.jpg'); return { props: { blurDataURL: base64 } }; }

4. Format Selection (AVIF/WebP)

// next.config.js - Enable AVIF module.exports = { images: { formats: ['image/avif', 'image/webp'], deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], }, };

// HTML picture element for non-Next.js <picture> <source srcSet="/hero.avif" type="image/avif" /> <source srcSet="/hero.webp" type="image/webp" /> <img src="/hero.jpg" alt="Hero" width="1200" height="600" /> </picture>

5. Lazy Loading Patterns

// Default: lazy loading (below the fold) <Image src="/photo.jpg" alt="Photo" width={400} height={300} />

// Above the fold: eager loading <Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority // Preloads, no lazy loading />

// Native lazy loading (non-Next.js) <img src="/photo.jpg" alt="Photo" loading="lazy" decoding="async" width="400" height="300" />

6. Image CDN Configuration

// next.config.js - External image domains module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'cdn.example.com', pathname: '/images/**', }, { protocol: 'https', hostname: '*.cloudinary.com', }, ], }, };

// Cloudinary loader const cloudinaryLoader = ({ src, width, quality }) => { return https://res.cloudinary.com/demo/image/upload/w_${width},q_${quality || 75}/${src}; };

<Image loader={cloudinaryLoader} src="sample.jpg" alt="Cloudinary image" width={500} height={300} />

7. Art Direction (Different Images per Breakpoint)

'use client'; import Image from 'next/image'; import { useMediaQuery } from '@/hooks/useMediaQuery';

function ResponsiveHero() { const isMobile = useMediaQuery('(max-width: 768px)');

return ( <Image src={isMobile ? '/hero-mobile.jpg' : '/hero-desktop.jpg'} alt="Hero" fill priority sizes="100vw" /> ); }

// Or use CSS to swap <div className="relative h-[400px]"> <Image src="/hero-desktop.jpg" alt="Hero" fill className="hidden md:block object-cover" /> <Image src="/hero-mobile.jpg" alt="Hero" fill className="md:hidden object-cover" /> </div>

8. SVG and Icon Optimization

// Inline SVG for small icons (avoid network requests) import { IconCheck } from '@/components/icons'; <IconCheck className="w-4 h-4" />

// SVG sprites for many icons <svg className="hidden"> <symbol id="icon-check" viewBox="0 0 24 24">...</symbol> <symbol id="icon-close" viewBox="0 0 24 24">...</symbol> </svg>

<svg className="w-4 h-4"> <use href="#icon-check" /> </svg>

// Large decorative SVGs: use Image component <Image src="/illustration.svg" alt="" width={400} height={300} />

Performance Metrics Impact

Optimization LCP Impact CLS Impact Bandwidth

AVIF format -20-30% load None -50% size

Responsive sizes -30-50% load None -40% size

Blur placeholder Perceived faster Prevents shift +1kb

Priority loading -500ms+ None None

Lazy loading None (below fold) None Deferred

Anti-Patterns to Avoid

Anti-Pattern Problem Solution

No width/height CLS from layout shift Always set dimensions

Eager load all Slow initial load Use lazy loading

No priority on LCP Slow LCP Add priority prop

PNG for photos Large file size Use AVIF/WebP

Single image size Wasted bandwidth Use responsive sizes

Build-Time Optimization

Sharp for Next.js (auto-installed)

npm install sharp

Squoosh CLI for batch optimization

npx @squoosh/cli --webp '{"quality":80}' --avif '{"quality":65}' ./images/*

Quick Reference

// ✅ LCP Hero Image (static import for blur) import heroImage from '@/public/hero.jpg'; <Image src={heroImage} alt="Hero" priority placeholder="blur" sizes="100vw" fill />

// ✅ Remote image with explicit dimensions <Image src="https://cdn.example.com/photo.jpg" alt="Photo" width={800} height={600} sizes="(max-width: 768px) 100vw, 800px" />

// ✅ Responsive product card <Image src={product.image} alt={product.name} fill sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw" />

// ✅ next.config.js for AVIF/WebP images: { formats: ['image/avif', 'image/webp'], remotePatterns: [{ hostname: 'cdn.example.com' }], }

// ❌ NEVER: Missing dimensions (causes CLS) <Image src="/photo.jpg" alt="Photo" /> // Missing width/height!

// ❌ NEVER: Priority on non-LCP images <Image src="/footer-logo.png" priority /> // Wastes bandwidth

// ❌ NEVER: Using PNG for photos <Image src="/photo.png" /> // Use AVIF/WebP instead

Key Decisions

Decision Option A Option B Recommendation

Image format JPEG/PNG AVIF/WebP AVIF (30-50% smaller), WebP fallback

Next.js Image Static import Remote URL Static import for automatic blur placeholder

Lazy loading Always lazy Priority for LCP Priority for LCP, lazy for rest

Quality setting 100 75-85 75-85 - imperceptible difference, much smaller

Placeholder None Blur Blur - better perceived performance

Dimensions Fill mode Explicit w/h Fill with aspect-ratio container for flexibility

Anti-Patterns (FORBIDDEN)

// ❌ FORBIDDEN: Missing width/height (causes CLS) <Image src="/photo.jpg" alt="Photo" /> // ✅ CORRECT: Always set dimensions <Image src="/photo.jpg" alt="Photo" width={800} height={600} />

// ❌ FORBIDDEN: Using fill without container sizing <div> <Image src="/photo.jpg" alt="Photo" fill /> {/* No container size! */} </div> // ✅ CORRECT: Fill needs sized container <div className="relative h-[400px]"> <Image src="/photo.jpg" alt="Photo" fill /> </div>

// ❌ FORBIDDEN: priority on all images {images.map(img => ( <Image src={img.url} alt={img.alt} priority /> // All priority! ))} // ✅ CORRECT: Only LCP image gets priority <Image src={heroImage} priority /> {/* LCP only /} {belowFoldImages.map(img => ( <Image src={img.url} alt={img.alt} /> / Default lazy */ ))}

// ❌ FORBIDDEN: No sizes prop on responsive images <Image src="/photo.jpg" fill /> // No sizes = 100vw assumed always // ✅ CORRECT: Always specify sizes <Image src="/photo.jpg" fill sizes="(max-width: 768px) 100vw, 50vw" />

// ❌ FORBIDDEN: Using remote images without allowlist <Image src="https://untrusted.com/image.jpg" /> // Not in remotePatterns! // ✅ CORRECT: Configure remotePatterns in next.config.js

// ❌ FORBIDDEN: PNG for photographs <img src="/photo.png" /> // PNG is for transparency, not photos // ✅ CORRECT: Use AVIF/WebP for photos <Image src="/photo.jpg" /> // Next.js converts to AVIF/WebP

// ❌ FORBIDDEN: Quality 100 <Image quality={100} /> // Huge file, no visual benefit // ✅ CORRECT: Quality 75-85 <Image quality={85} />

// ❌ FORBIDDEN: Loading LCP content via client-side fetch useEffect(() => { fetchHeroImage().then(setHero); // LCP waits for JS + fetch! }, []); // ✅ CORRECT: Server-render LCP images export default async function Page() { const hero = await getHero(); return <Image src={hero.image} priority />; }

// ❌ FORBIDDEN: Empty alt on non-decorative images <Image src="/product.jpg" alt="" /> // Inaccessible! // ✅ CORRECT: Meaningful alt text <Image src="/product.jpg" alt="Red sneakers, side view" />

Related Skills

• core-web-vitals

• LCP optimization, performance monitoring

• accessibility-specialist

• Image alt text, WCAG compliance

• react-server-components-framework

• Server-rendering for LCP images

• frontend-ui-developer

• Modern frontend patterns

Capability Details

next-image

Keywords: next/image, Image component, fill, priority, sizes, quality Solves: Automatic optimization, format conversion, responsive images

avif-webp

Keywords: AVIF, WebP, format, compression, modern-formats Solves: Reducing image file size by 30-50% with same quality

blur-placeholder

Keywords: blur, placeholder, blurDataURL, plaiceholder, perceived-performance Solves: Better perceived performance, visual stability during load

responsive-sizes

Keywords: sizes, srcset, responsive, breakpoint, viewport Solves: Serving appropriately-sized images for each device

image-cdn

Keywords: CDN, Cloudinary, imgix, Cloudflare, loader, remote Solves: Global distribution, on-demand transformation, caching

lazy-loading

Keywords: lazy, loading, priority, eager, preload, LCP Solves: Reducing initial page load by deferring off-screen images

References

• references/cdn-setup.md

• Image CDN configuration

• scripts/image-component.tsx

• Reusable image wrapper

• checklists/image-checklist.md

• Optimization checklist

• examples/image-examples.md

• Real-world image patterns