How to Compress Images for the Web Without Losing Quality
A 4 MB hero image is the single most common reason a page feels slow. The frustrating part is that you can usually cut it by 80% or more with no visible difference, if you do two things in the right order: resize first, then compress. Most people skip the resize step and wonder why their "compressed" image is still huge.
Here is the whole process, plus how to pick the right format, which is where the biggest and easiest wins hide.
Why file size is worth your time
Images are usually the heaviest thing on a page, and the hero image is often the Largest Contentful Paint element, one of Google's Core Web Vitals. Shrink it and your LCP drops, your page feels faster, mobile users on slow connections actually stay, and you get a small ranking nudge as a bonus. It is one of the highest-leverage speed fixes there is.
Step 1: resize before you compress (the big one)
This is the step everyone skips. A photo straight off a phone is often 4000+ pixels wide, but it is displayed in an 800px column. You are shipping 5x the pixels the browser will ever show. Resize the image down to the largest size it actually appears at (double it for retina screens, so an 800px slot means a 1600px image) before you do anything else. This alone often cuts the file more than compression does.
Step 2: pick the right format
Format choice can halve your file size on its own. The quick decision table:
| Format | Best for | Notes |
|---|---|---|
| JPEG | Photos | Lossy, universal, no transparency. Fine default for photos. |
| PNG | Logos, screenshots, sharp text, transparency | Lossless, larger. Great for graphics, wasteful for photos. |
| WebP | Almost everything | Roughly 25-35% smaller than JPEG at the same quality, supports transparency, near-universal support now. |
| AVIF | Photos, when you want the smallest file | Smallest of all for photos, supported in current browsers, slower to encode. |
| SVG | Icons, logos, line art | Vector, tiny, scales infinitely. Never for photos. |
Practical default in 2026: convert photos to WebP. It is the sweet spot of big savings and broad support. Reach for AVIF when you want to squeeze a hero image as small as possible, and keep PNG only for graphics with transparency or crisp text.
Step 3: choose lossy, and the right quality
Lossless keeps every pixel exactly and barely shrinks photos. Lossy throws away detail your eye will not miss and shrinks them a lot. For photos on the web, lossy is almost always the right call.
The quality sweet spot for JPEG and WebP is around 75 to 82. Below ~70 you start to see blocky artifacts in skies and gradients; above ~85 you are adding file size for detail nobody can see. Start at 80, look at the result at full size, and only drop lower if it still looks clean.
What to aim for
- Hero / full-width images: try to land under ~200 KB after resize + compression.
- In-content images: usually well under 100-150 KB is achievable and looks fine.
- Thumbnails and icons: a few KB. If a thumbnail is 500 KB, it was never resized.
These are guidelines, not laws. The real test is: does it look clean at the size it is shown, and is the file as small as it can be while staying that way.
Doing it, in your browser
You do not need Photoshop or an upload to a random site for this. Open the image compressor, drop in your image, convert it to WebP, and pull the quality down until the size is right and it still looks clean. It runs entirely in your browser, so the image is never uploaded to a server, which matters when the picture is a product shot or a screenshot you would rather not hand to a third party. If you also need to change the dimensions, the crop and resize tool handles the resize-first step.
One honest note
Tools like TinyPNG and Squoosh are excellent and well known. The reason to use an in-browser compressor instead is privacy and friction: nothing is uploaded, there are no monthly limits, and there is no signup. For a quick job or a private image, that is the win. For a giant batch pipeline in CI, a build-time image tool is the better fit. Pick the one that matches the job.
FAQ
Can I compress an image without losing quality?
Truly lossless compression only shrinks photos a little. For real savings, use lossy compression at a high quality (around 80); the loss is there but invisible at normal viewing size. For graphics and logos, lossless PNG or SVG keeps them pixel-perfect.
Is WebP better than JPEG?
For most web images, yes. WebP is typically 25-35% smaller at the same visual quality and supports transparency. Support is effectively universal now.
Should I use AVIF?
AVIF gives the smallest files for photos and is supported in current browsers. Use it for hero images where size matters most; it just takes a bit longer to encode.
Why is my compressed image still huge?
Almost always because you compressed without resizing. A 4000px image compressed is still a 4000px image. Resize to the displayed size first, then compress.
Shrink your next image with the free image compressor (convert to WebP, quality ~80), and resize first with the crop and resize tool.