TL;DR: Resize first (2x your display size for retina), pick the right format (AVIF > WebP > JPEG for photos), set quality to 75-85 for JPEG, strip metadata, and lazy-load below-the-fold images. These steps typically cut image payload by 70-90%.
Let me hit you with a number: images account for roughly 40-50% of a typical web page's total weight. That means almost half of what your visitors download is pictures. A single unoptimized photo straight from a camera can be 3-5 MB — and that is often more than your entire web page should weigh.
The good news? Compressing images is the single highest-impact performance win most websites can get. It is not glamorous work, but your users (and Google) will absolutely notice the difference.
Unoptimized images on a website are like bringing a suitcase full of bricks on vacation. Sure, it works technically, but why would you do that to yourself?
Why You Should Care About Image Size
- Page speed and SEO: Google uses Core Web Vitals as a ranking signal. Large images kill your Largest Contentful Paint (LCP) score.
- Bandwidth costs: Serving images from a CDN? You pay per GB transferred. Smaller images = smaller bills.
- Mobile users: Millions of people browse on 3G/4G connections. Every kilobyte counts.
- User experience: Slow images cause visible layout shifts and make your site feel like it is stuck in 2005.
Lossy vs. Lossless: The Two Philosophies
Lossless Compression
Think of it like a ZIP file for images. The file gets smaller, but when you decompress it, you get the exact same pixels back. Typical savings: 10-30%. Formats: PNG (optimized), WebP lossless, AVIF lossless.
Lossy Compression
This one permanently tosses out image data that your eyes probably would not notice anyway. The savings are much bigger: 60-90%. Formats: JPEG, WebP lossy, AVIF lossy.
For photographs on the web, lossy compression at the right quality setting is almost always the way to go. The difference between quality 85 and quality 100 is invisible to human eyes but massive in file size.
Picking the Right Format
| Format | Best For | Transparency |
|---|---|---|
| JPEG | Photos, complex images | No |
| PNG | Screenshots, logos, transparency | Yes |
| WebP | Everything (25-35% smaller than JPEG) | Yes |
| AVIF | Everything (50% smaller than JPEG!) | Yes |
| SVG | Icons, logos, illustrations (vector) | Yes |
The gold standard today is serving AVIF with a WebP fallback and JPEG as the safety net:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" loading="lazy">
</picture>The <picture> element is like a restaurant menu — the browser picks the first format it supports and ignores the rest. Newer browsers get the smaller file automatically.
Quality Settings: The Sweet Spot
- JPEG: 75-85 quality. Below 70, you start seeing ugly artifacts. Above 90, file size balloons with almost no visible improvement.
- WebP: 75-80 quality. WebP is more efficient, so the same visual quality comes at a lower number.
- AVIF: 60-70 quality. AVIF is absurdly efficient — quality 65 often matches JPEG at 85.
The Step Most People Skip: Resize First!
This is the biggest bang-for-your-buck optimization and people skip it constantly. A 4000x3000 pixel photo displayed in an 800px-wide column is wasting 80% of its pixels. Nobody benefits from those extra pixels. Nobody.
If your layout column is 800px wide, export the image at 1600px (2x for retina) and call it done. For responsive images, use srcset:
<img
srcset="photo-800.jpg 800w,
photo-1200.jpg 1200w,
photo-1600.jpg 1600w"
sizes="(max-width: 800px) 100vw, 800px"
src="photo-1200.jpg"
alt="Description"
loading="lazy"
>File Size Targets to Aim For
- Hero images: Under 200 KB (ideally under 150 KB)
- Content images: Under 100 KB
- Thumbnails: Under 30 KB
- Icons/logos: Under 10 KB (use SVG when possible)
- Total page images: Under 1 MB for the initial viewport
Bonus Optimizations
- Strip metadata. Camera photos carry EXIF data (GPS, camera model, etc.) that adds 10-50 KB per file. Remove it unless you specifically need it.
- Lazy-load below-the-fold images. Just add
loading="lazy". But do NOT lazy-load your hero image — that hurts LCP. - Use CSS for simple shapes. Gradients, shadows, and rounded shapes in pure CSS cost zero download bytes.
- Progressive JPEGs. They load as a blurry full image that sharpens, instead of top-to-bottom. Feels faster even if total time is the same.
Never lazy-load your hero image or anything above the fold. That is like telling your front door guests to wait outside while you finish decorating. They will leave.
The Compression Workflow Checklist
- Resize to max display dimensions (2x for retina).
- Pick the right format (AVIF > WebP > JPEG for photos; SVG > PNG for graphics).
- Set quality to the lowest value that still looks good (start at 80, lower until you see artifacts, bump back up).
- Strip metadata unless you specifically need it.
- Use responsive images with
srcsetfor different screen sizes. - Lazy-load everything below the fold.
Follow these steps and you will typically cut your total image payload by 70-90%. Your pages load faster, your users are happier, your Google ranking improves, and your hosting bill goes down. It is one of those rare wins where everybody benefits.
Try It Yourself
Drop your images into our browser-based compressor. No upload to any server — everything runs locally in your browser.
Open Image Compressor →