Image Optimization: The Biggest Web Perf Win

If you open the network tab on almost any website and sort by size, the top of the list is rarely your JavaScript bundle. It is the images. As 2025 opens, the median web page still ships well over a megabyte of imagery, and on content-heavy and commerce sites it is routinely the single largest category of bytes a browser has to download, decode, and paint. That matters more than ever now that Core Web Vitals are a confirmed Google ranking signal—and since March 2024, when Interaction to Next Paint replaced First Input Delay as a Core Web Vital, the bar for "fast enough" has only risen. The encouraging part: image optimization is the highest-leverage performance work most teams can do, and unlike a framework migration, the techniques barely change year to year. As CTO at Softechinfra, I have watched the same five-step image checklist move Largest Contentful Paint from "failing" to "good" across our web development projects. This guide is that checklist, written to still be correct when you read it in 2027.

Why Images Dominate Your Performance Budget

Largest Contentful Paint—the moment your biggest above-the-fold element finishes rendering—is the Core Web Vital images most directly control. On the majority of pages, that largest element is a hero image, a product photo, or an article header. If it arrives late, your LCP is bad no matter how lean your code is.

Three properties make images uniquely expensive, and uniquely fixable:

• They are large by default. A camera or design export is sized for print or retina displays, not for a phone on a train. Most images on the web are several times larger than the slot they are displayed in.
• They block the visual experience. Users forgive a delayed analytics script. They do not forgive a blank rectangle where the product they came to see should be.
• They are mechanical to optimize. Unlike performance regressions buried in application logic, image wins come from a repeatable pipeline. Once built, it keeps paying off on every new asset.

The Five-Step Image Optimization Checklist

Work these in order. Each step compounds on the last, and the early steps deliver the largest wins for the least effort.

A worked example: srcset done right

The responsive markup that ties steps 1–4 together looks like this. The picture element offers AVIF first, falls back to WebP, and finally to JPEG; the srcset inside each source lists physical widths, and sizes tells the browser how wide the slot is at each breakpoint:

• Offer formats best-first: AVIF, then WebP, then JPEG, using a picture element with multiple source tags.
• List real pixel widths in srcset (for example 400w, 800w, 1200w) so the browser can pick by viewport and device pixel ratio.
• Declare the rendered width in sizes (for example (max-width: 600px) 100vw, 600px) so the choice is made before download, not after.
• Always set explicit width and height (or an aspect-ratio) so the browser reserves space and avoids layout shift.

What Good Looks Like: A Before-and-After

Numbers make the case better than adjectives. The pattern below is representative of what the five steps achieve on a typical image-heavy page—an unoptimized JPEG hero versus the same hero run through the full pipeline.

The LCP target deserves emphasis: Google's "good" threshold for Largest Contentful Paint is 2.5 seconds on mobile. On image-led pages, hitting that number is almost entirely a function of how fast the hero image arrives—which is to say, the five steps above are the work.

Format Decisions Without the Guesswork

You do not need to memorize codec internals. You need a default and a short list of exceptions. This table is the decision guide we hand to teams so the choice is made once and applied consistently.

How This Plays Out on a Real Product

On ExamReady, our UK-focused 11+ creative-writing and SPAG learning platform, the front end is dense with imagery—worksheet previews, illustrated prompts, mock-test thumbnails, and progress dashboards. Students reach it on a wide range of devices and home connections, and a slow-loading worksheet is the difference between a child practising and a parent giving up. We treated images as a first-class performance budget: AVIF with WebP fallback for illustrations, an image CDN generating per-breakpoint sizes from a single source, lazy loading on every grid below the fold, and explicit dimensions everywhere to keep layout shift at zero. The result is a content-heavy product that still posts "good" Core Web Vitals on a mid-range phone.

The same discipline carries over to client work. On TalkDrill, our in-house English-speaking practice app, we apply the identical image pipeline so the interface loads quickly even on the patchy mobile connections common across our users' commutes. The pipeline is built once and reused; the wins accrue on every screen after.

Build It Into Your Workflow, Not Your Memory

The reason image optimization quietly regresses is that it depends on humans remembering. Someone drops a 3 MB PNG into a CMS at 11pm and the budget you fought for is gone. Durable performance comes from automation:

• Automate the conversion. Whether through a framework image component, a build step, or an image CDN, no human should be hand-exporting AVIF files.
• Enforce the budget in CI. Fail the build if a page's image weight exceeds the threshold you set. A budget nobody checks is a wish.
• Lint the markup. Flag any img without dimensions, any below-the-fold image without lazy loading, and any hero that was accidentally lazy-loaded.
• Measure in the field. Lab scores are a starting point; real-user Core Web Vitals data tells you what your actual visitors experience on their actual devices.

If you want the full Core Web Vitals picture—how LCP, INP, and CLS interact and how to diagnose each—our Core Web Vitals guide goes deeper, and for teams modernizing an older front end, our Next.js App Router guide covers how a built-in image component bakes most of this checklist in by default. Image optimization is rarely the most glamorous item on a roadmap. It is almost always the one with the best return.