The Real Guide to Image Optimization (Cut Page Weight 50%+)

On most websites, images are 50-80% of the total page weight. If you only optimize one thing for performance, it should be images. Here's the full playbook.

The 4 levers of image optimization

1. Format — use the right file type
2. Compression — remove invisible quality
3. Dimensions — serve the size that will actually display
4. Loading strategy — don't load images the user won't see

Hit all four and you'll cut page weight 50-80% without any visible quality loss.

Lever 1: Format

WebP (use this by default) - 25-35% smaller than JPEG at the same quality - Supports transparency like PNG - Supported in all modern browsers

AVIF (even better, slightly newer) - 50% smaller than JPEG - Supported in Chrome, Firefox, Safari 16+

JPEG (legacy fallback) - Only use when WebP isn't an option - For photos, not for graphics with sharp edges

PNG - Only use when you need lossless transparency that WebP can't match - Usually overkill for web

SVG - Use for logos, icons, simple illustrations - Scales infinitely at no size cost

Recommended setup: Serve AVIF with WebP fallback, then JPEG for ancient browsers.

Lever 2: Compression

JPEG quality 85 looks identical to quality 100 but is half the size. Quality 75 is often indistinguishable and 70% smaller.

Tools - ShortPixel, Imagify, Smush — WordPress plugins that auto-compress uploads - Squoosh — Google's web-based compressor for manual optimization - ImageOptim — Mac app for bulk compression - Sharp — Node.js library for automated pipelines

Rule of thumb - Photos: 75-85% quality in WebP - Graphics: use SVG if possible, otherwise lossless WebP/PNG

Lever 3: Dimensions

This is where most sites fail. They upload a 4000×3000 photo and display it at 800×600. The browser downloads all 4000 pixels and scales down.

Fix: Serve the right size

Use the <picture> element with responsive sizes:

``html <picture> <source srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px" type="image/webp"> <img src="hero-800.jpg" alt="..."> </picture> ``

The browser picks the size that fits the screen. Mobile users don't download desktop-sized images.

CMS helpers - WordPress — wp_get_attachment_image generates srcset automatically - Next.js — <Image> component handles all of this - Shopify — Liquid has image_tag helpers for responsive images

Lever 4: Loading strategy

Lazy load below-the-fold images

``html <img src="photo.jpg" loading="lazy" alt="..."> ``

Browser won't download the image until the user scrolls near it. Massive win for long pages.

Don't lazy-load the hero image

Your LCP (Largest Contentful Paint) element should load eagerly — lazy-loading it hurts Core Web Vitals.

Preload critical images

``html <link rel="preload" as="image" href="/hero.webp"> ``

Tells the browser to start loading the hero before even parsing the rest of the page.

Always declare dimensions

``html <img src="photo.webp" width="800" height="600" alt="..."> ``

Prevents layout shift (CLS) while the image loads. Critical for Core Web Vitals.

Common mistakes

• Uploading one giant image for everything → Use responsive images
• No WebP fallback to JPEG → You're making desktop users download bigger files
• Using CSS `background-image` for above-the-fold content → Can't be preloaded, hurts LCP
• Forgetting alt text → Bad for SEO and accessibility
• Using GIFs for video → Always use real video, 10x smaller

Real-world impact

A typical non-optimized site: 4MB of images → load time 5-6 seconds on mobile.

Same site, fully optimized: 600KB of images → load time 1.5-2 seconds on mobile.

That's it — one optimization pass, 3x faster site.

Need help?

Most sites can cut page weight 50-70% in a day with a proper image optimization pass. If you want it done for you, send me a message and I'll audit your site and set up automated optimization.