Image Optimization for Core Web Vitals: Shrinking 900 KB Heroes to 130 KB

#webdev #images #performance #tutorial

Every performance audit I run on content sites finds the same problem: images are 60-80% of page weight. On a review site with hero images and game screenshots, a single unoptimized image can wreck your Core Web Vitals. Here is the exact workflow I use to shrink images from 900 KB to ~130 KB without visible quality loss.

The three-step pipeline

Step 1: Resize to the actual display size

The #1 mistake: serving a 2000px-wide image in a 640px container. Determine the real rendered width (with srcset breakpoints) and resize to that.

Step 2: Convert to modern format

Use WebP (or AVIF for even better compression). WebP gives roughly 25-35% smaller files than JPEG at the same quality. In Python:

from PIL import Image
im = Image.open("hero.jpg").convert("RGB")
im.save("hero.webp", "WEBP", quality=82, method=6)

Step 3: Compress the right way, not the lazy way

Don't just crank quality down to 30 — that creates artifacts. Instead:

Keep quality at 80-85 and let WebP's compression do the work.
For JPEG fallbacks use progressive encoding.
Strip all metadata (EXIF, GPS) — free kilobytes.
Use method=6 (slowest, best compression) for WebP.

The numbers from a real site

On the review site I maintain, these were the before/after results:

Image	Before	After	Savings
Hero banner	913 KB	134 KB	−85%
Champion league header	1,073 KB	108 KB	−90%
Transfer market banner	751 KB	120 KB	−84%
Background	922 KB	134 KB	−85%

Page weight dropped by ~4 MB across the site, and LCP went from "red" to green.

HTML side: srcset + lazy loading

<img
  src="hero.webp"
  srcset="hero-640.webp 640w, hero-1280.webp 1280w"
  sizes="(max-width: 768px) 640px, 1280px"
  alt="Rise of Apollo game review hero"
  loading="lazy"
  decoding="async"
>

srcset + sizes — the browser picks the right size.
loading="lazy" — below-the-fold images don't block rendering.
decoding="async" — prevents image decode from blocking the main thread.
Descriptive alt text with target keywords — helps image search (and it's an accessibility requirement anyway).

A real example to inspect

Take a look at how a real review page handles its hero image — the Rise of Apollo review serves a compressed WebP with proper alt text and the whole page loads fast enough to pass Core Web Vitals on mobile.

The takeaway

Image optimization is the highest-ROI performance task on any content site. Resize → convert to WebP → compress properly → add srcset and lazy loading. Total effort: one afternoon. Impact: green Core Web Vitals and a real ranking edge.

Originally published on PGSLOTWEB.

DEV Community