How to Compress Images for SEO Without Killing Quality

Images are the single biggest reason most websites are slow. They're also the easiest performance win - most pages can shed 60% of their image weight without anyone noticing the quality drop. Here's how to do it in 2026.

Why image compression matters for SEO

Google uses Core Web Vitals as a ranking signal, and the biggest one - LCP (Largest Contentful Paint) - is usually a hero image. If your hero image is 1.2 MB, your LCP will be slow on mobile networks no matter what else you do.

The fix is boring but effective: compress and resize every image before you ship it.

The three things that matter

1. Format - WebP for almost everything, AVIF for hero images if you can.
2. Dimensions - never serve a 4000px image to a phone.
3. Quality - 75–85% is the sweet spot; humans can't tell the difference, but file sizes halve.

Step 1: Resize before compressing

The single biggest mistake is uploading a 3000×2000 photo straight from your camera. A retina iPhone tops out around 1334px wide. Anything bigger is wasted bytes.

Targets:

• Hero / banner: max 1920px wide
• Blog post inline images: max 1200px wide
• Thumbnails / cards: max 600px wide

Use our Resize Image tool to nail the dimension before you compress.

Step 2: Convert to WebP

WebP gives you ~30% smaller files than JPG at the same visual quality, and every modern browser supports it. AVIF goes even further (~50% smaller) but encoding is slower.

→ WebP Converter

Step 3: Compress

After resizing and converting, run the image through a compressor with quality at 80%. Eyeball the result - if it still looks great, drop to 75%. For decorative images (blurs, gradients) you can go lower.

→ Image Compressor

The order matters

Always: resize → convert → compress. Resizing after compression discards the compression work. Converting to WebP after compressing JPG is double-encoding, which loses quality.

A real example

We took a 4.2 MB camera photo and ran it through the pipeline above:

Step	Size	Visual difference
Original (4032×3024 JPG)	4.2 MB	-
Resized to 1920×1440	1.8 MB	None
Converted to WebP	1.1 MB	None
Compressed to 80% quality	280 KB	Visually identical

93% smaller, indistinguishable from the original on a phone screen. Multiply that across 10 images on a page and LCP drops from ~4s to ~1s.

Don't forget responsive images

A 1920px WebP is great for desktop, but you're still serving way too much to mobile. Use the HTML srcset attribute (or Next.js <Image />) to serve different sizes for different viewports:

<img
  srcset="hero-480.webp 480w, hero-960.webp 960w, hero-1920.webp 1920w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 1920px"
  src="hero-960.webp"
  alt="..."
/>

Combined with WebP + good compression, you should see a real bump in PageSpeed scores within a deploy or two.