Images are consistently the single largest contributor to page weight on most sites, which means image optimization is often the highest-leverage performance work available — and much of it can be automated rather than done by hand per image.
Image optimization covers serving the right format (WebP/AVIF over JPEG/PNG where supported), the right size (matching actual display dimensions rather than a single oversized original), appropriate compression, and correct loading behavior (eager for above-the-fold, lazy for below-the-fold). Modern frameworks provide built-in image components that automate most of this.
Why Image Optimization Matters (and When to Skip It)
Unoptimized images — wrong format, oversized dimensions, no compression — routinely account for the majority of a page's total download weight, directly hurting LCP and overall load time. The fix is usually mechanical rather than requiring difficult tradeoffs: modern formats and automated resizing get most of the benefit with minimal manual effort once set up correctly.
Skip manual, per-image optimization work if you're already using a framework's automated image component (like Next.js's next/image) correctly — it's handling format selection, sizing, and lazy loading for you, and manually second-guessing it is rarely worth the effort.
Getting Started with Image Optimization
Using Next.js's built-in image component, which handles format conversion, responsive sizing, and lazy loading automatically:
import Image from "next/image";
<Image
src="/hero.jpg"
alt="Product hero"
width={1200}
height={630}
priority // for above-the-fold images, disables lazy loading and preloads
/>
For responsive images without a framework component, using srcset:
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="..."
loading="lazy"
/>
Core Image Optimization Concepts Every Developer Should Know
Modern formats (WebP, AVIF) compress significantly better than JPEG/PNG at equivalent visual quality. Serving these formats to supporting browsers (with a fallback for older ones) is close to a free performance win — most optimization tools and framework image components handle this negotiation automatically.
Responsive images serve appropriately sized files per viewport, rather than sending a single large image and letting the browser scale it down with CSS — a common and wasteful pattern where a 2000px image gets displayed at 400px, downloading far more data than needed.
The LCP image should be eagerly loaded and ideally preloaded, never lazy-loaded. This is the same principle from lazy loading generally, but worth restating specifically for images since it's a common and costly mistake — a lazy-loaded hero image directly delays your LCP metric.
Compression quality settings involve a real visual-quality-versus-file-size tradeoff. Most images can tolerate more compression than intuition suggests without a visible quality difference — worth testing actual compression levels rather than defaulting to "maximum quality" for every image.
Common Image Optimization Mistakes and How to Fix Them
Mistake 1: serving a single oversized image and letting CSS scale it down. This wastes bandwidth proportional to the size difference. Fix: use responsive images (srcset or a framework's image component) that serve appropriately sized files per viewport.
Mistake 2: lazy-loading the LCP/hero image. This actively hurts the specific metric that most affects perceived load speed. Fix: load above-the-fold images eagerly, and preload the LCP image specifically.
Mistake 3: not converting to modern formats, still serving unoptimized JPEG/PNG by default. Fix: use a framework image component or an image CDN that automatically negotiates format based on browser support.
When Should You Use a Framework Image Component Instead of Manual Optimization?
Use a framework's built-in image component (Next.js Image, similar equivalents elsewhere) by default — it automates responsive sizing, format negotiation, and lazy loading correctly with minimal effort, and manual optimization rarely outperforms it. Consider manual or CDN-based optimization (Cloudinary, imgix) when you need transformation capabilities beyond what the framework component provides, like on-the-fly cropping or watermarking.
Image Optimization in Production
Audit page weight periodically to catch new images added without going through your optimization pipeline — a manually added image that bypasses the framework's image component is a common way regressions creep in. Also verify the LCP image specifically is preloaded and appropriately sized for its actual display dimensions, since it disproportionately affects your most visible performance metric.
If your Lighthouse report flags "properly size images" or "serve images in next-gen formats," that's a concrete, usually mechanical fix worth making before anything else on the performance list.