Why Your Images Are Killing Your Core Web Vitals (and How I Fixed It in One Afternoon)

The problem nobody notices until it's a problem

Run PageSpeed Insights on almost any e-commerce store, blog, or portfolio site and you'll find the same culprit sitting at the top of the report: images. Not your JS bundle, not your fonts — images, usually accounting for 60–70% of total page weight.

It's an easy thing to ignore because it doesn't feel like a "real" performance problem. Nobody profiles a <img> tag the way they profile a slow API call. But Largest Contentful Paint (LCP) — one of Google's three Core Web Vitals — is, on most pages, literally an image. If that image is a 2–4MB JPEG straight off a phone camera, you've already lost the metric before a single line of your carefully optimized JS runs.

Why WebP (and not just "compress the JPEG")

The instinct is usually "run it through TinyPNG." That helps, but it's solving the wrong layer of the problem — you're still stuck with JPEG's compression algorithm, which is decades old at this point.