AI Rules for Image Optimization

AI Serves Uncompressed 4000px PNGs

AI generates image tags with: full-resolution originals (4000x3000px served to a 400px card), no modern formats (PNG/JPEG instead of WebP/AVIF), no responsive sizes (same image for mobile and desktop), no compression (5MB hero image), no lazy loading (all images load upfront), and no CDN (images served from the application server). Images are typically 50-80% of a page total weight. Unoptimized images are the single biggest performance problem AI creates.

Modern image optimization is: format-adaptive (WebP for broad support, AVIF for maximum compression), responsive (srcset with multiple sizes, sizes attribute for viewport matching), compressed (quality 75-85, visually lossless), lazy-loaded (below-fold images deferred), and CDN-delivered (edge-cached, auto-format negotiation). AI generates none of these.

These rules cover: WebP/AVIF format selection, responsive srcset with sizes, Next.js Image component, CDN delivery with auto-format, and build-time compression pipelines.

Rule 1: WebP and AVIF Format Selection

The rule: 'Serve images in WebP (97% browser support) or AVIF (92% support, 50% smaller than JPEG). Use the <picture> element for format fallback: <picture><source srcset="photo.avif" type="image/avif" /><source srcset="photo.webp" type="image/webp" /><img src="photo.jpg" alt="Description" /></picture>. Browsers pick the first supported format. AVIF for maximum compression; WebP as the universal modern format; JPEG/PNG as fallback.'

For format comparison: 'Same visual quality: JPEG 100KB, WebP 65KB (35% smaller), AVIF 50KB (50% smaller). For a page with 20 images: JPEG = 2MB, WebP = 1.3MB, AVIF = 1MB. On a 3G connection: JPEG = 16 seconds, AVIF = 8 seconds. Format selection alone halves the image payload. Combine with responsive sizing and compression for 80%+ reduction.'

AI generates: <img src='photo.png' /> — uncompressed PNG, no format alternatives. A product image that is 3MB as PNG is 200KB as WebP at the same visual quality. 15x smaller. The format conversion is automated (build pipeline or CDN) — zero ongoing effort for massive bandwidth savings.

• AVIF: 50% smaller than JPEG, 92% browser support — best compression
• WebP: 35% smaller than JPEG, 97% support — universal modern format
• <picture> element for format fallback: AVIF > WebP > JPEG
• Auto-format via CDN: Cloudflare, Vercel, or imgix negotiate format per browser
• Format conversion in build pipeline: sharp, imagemin, or squoosh CLI

Rule 2: Responsive srcset and sizes

The rule: 'Use srcset to provide multiple image sizes and sizes to tell the browser which size to use: <img srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" src="photo-800.webp" alt="Description" />. The browser selects the optimal size based on viewport width and device pixel ratio. A phone loads the 400px image; a 4K display loads the 1200px image.'

For the sizes attribute: 'sizes tells the browser how large the image will display: 100vw (full width), 50vw (half width), or a specific value (400px). Without sizes, the browser assumes 100vw and downloads the largest image for every viewport. With sizes: the browser matches the displayed size to the closest srcset option. Accurate sizes = optimal image selection = minimum bandwidth.'

AI generates: <img src='photo-4000.jpg' /> — a 4000px image displayed at 400px on mobile. The user downloads 3MB instead of 50KB. 60x more data than needed. srcset with three sizes (400, 800, 1200) covers: mobile (400), tablet (800), and desktop (1200). The browser picks the right one automatically.

Rule 3: Next.js Image Component

The rule: 'In Next.js projects, always use the Image component from next/image instead of <img>. It provides: automatic WebP/AVIF conversion (format negotiation per browser), responsive srcset generation (from a single source image), lazy loading by default (below-fold images deferred), blur placeholder (blurDataURL for progressive loading), and image optimization API (on-demand resizing at the edge).'

For configuration: 'Required props: src, alt, width, height (or fill for fluid images). Priority prop for LCP image: <Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />. Priority disables lazy loading and preloads the image. Use for: hero images, above-fold product images, and any image likely to be the LCP element. All other images: lazy loading by default.'

AI generates: <img src='/hero.jpg' /> in a Next.js project — bypassing all automatic optimization. The Image component: serves WebP to Chrome, JPEG to Safari 14 (auto-format), generates srcset for multiple widths (auto-responsive), lazy loads below-fold images (auto-lazy), and caches optimized images at the edge (auto-CDN). One component replacement, five optimizations.

Rule 4: CDN Image Delivery and Caching

The rule: 'Serve images from a CDN (Cloudflare, Vercel, Cloudinary, imgix) with: auto-format (CDN detects browser capabilities and serves WebP/AVIF), on-demand resize (URL parameters for width/height: /image.jpg?w=400), aggressive caching (Cache-Control: public, max-age=31536000, immutable for hashed URLs), and global edge delivery (images served from the edge location nearest to the user).'

For image URLs: 'Use content-hashed URLs for cache busting: /images/hero-a3f8c2.webp. The hash changes when the image changes, busting the cache. The max-age can be 1 year (immutable) because the URL changes on any image update. Without hashing: either short cache TTL (frequent re-downloads) or stale images after updates (users see old versions).'

AI generates: images served from the application server with no caching headers. Every page load re-downloads every image. A CDN with proper caching: the image downloads once, is cached at the edge for a year, and subsequent visits load from the cache in milliseconds. The origin server handles zero image requests after the first one.

Rule 5: Build-Time Compression Pipeline

The rule: 'Compress images in the build pipeline, not at request time. Tools: sharp (Node.js, fastest), squoosh (Google, web and CLI), imagemin (webpack/Vite plugin). Settings: JPEG quality 75-85 (visually lossless), WebP quality 80, AVIF quality 65. Generate multiple sizes per image: 400w, 800w, 1200w, 2400w. Output to a public directory with content-hashed filenames.'

For automation: 'Configure the build pipeline to: (1) scan the images directory for originals, (2) for each image, generate WebP + AVIF + fallback JPEG at 4 widths, (3) output 12 files per original image (3 formats x 4 widths), (4) update references in the code to use the optimized files. This runs once at build time — zero runtime cost. CI ensures every image is optimized before deployment.'

AI generates: images copied as-is from the designer handoff to the public folder. A 5MB PNG hero image served to every visitor. A 2-minute build pipeline step: compress to 200KB WebP + 150KB AVIF at the right display size. One-time automation, permanent 25x reduction in image payload.

Complete Image Optimization Rules Template

Consolidated rules for image optimization.

• WebP/AVIF formats: 35-50% smaller than JPEG at same quality
• <picture> for format fallback: AVIF > WebP > JPEG/PNG
• srcset with sizes: multiple widths, browser picks optimal size
• Next.js Image: auto-format, auto-srcset, auto-lazy, auto-CDN — use it
• CDN delivery: auto-format, on-demand resize, edge caching, immutable URLs
• Build-time compression: sharp/squoosh, quality 75-85, 4 sizes per image
• fetchpriority='high' on LCP image — priority prop in Next.js Image
• Content-hashed URLs: immutable caching, automatic cache bust on change