How to Compress an Image for the Web
To compress an image, re-save it at a lower quality — around 70–80% is the sweet spot — and use a compressed format like JPG or WebP. That discards detail your eye barely registers and can cut the file size by 70% or more, making pages load faster without a visible drop in quality. Here's how to do it right.
Key takeaways
- Aim for 70–80% quality — big size cut, little visible loss.
- Use JPG or WebP for photos; PNG barely compresses them.
- Also shrink the dimensions if the image is bigger than it's displayed.
- Do it privately with the image compressor.
Why compress at all?
Large images are the number-one cause of slow web pages. A slow page frustrates visitors and hurts search rankings. Compression keeps images looking good while shrinking the file, so your site loads faster and uses less bandwidth and storage.
Step 1: Pick the right quality
Most tools use a quality slider from 0 to 100. Somewhere around 70–80% usually removes a huge chunk of file size with no difference you can spot. Go lower only if size is critical — below about 50% you'll start seeing blocky artefacts, especially around edges and text.
Step 2: Use a compressed format
Format matters as much as quality. Photos saved as PNG stay huge because PNG is lossless. Save them as JPG or WebP instead and the same picture can be a fraction of the size. Not sure which to use? See PNG vs JPG vs WebP.
Step 3: Resize if it's oversized
A photo that's 4000 px wide but shown at 800 px is wasting most of its data. Before or after compressing, cut the dimensions down to roughly the size it's actually displayed with the image resizer. Resizing plus compressing together gives the smallest file.
Keep your original file. Compression is lossy, so you can always make a smaller copy from the original, but you can't recover detail once it's gone.
Frequently asked questions
How do I compress an image?
Re-save it at a lower quality setting, around 70 to 80 percent, which discards detail your eye barely notices and shrinks the file. Saving photos as JPG or WebP compresses far more than PNG.
Does compressing an image reduce quality?
Lossy compression removes some detail, but at 70 to 80 percent quality the change is usually invisible while the file gets much smaller. Push the quality too low and you'll see blocky artefacts.
What file size should a web image be?
As a rule of thumb, keep most web images under about 200 KB, and large hero images under 500 KB. Smaller is better for page speed, as long as the image still looks good.
Related: Image Compressor · How to Resize an Image · PNG vs JPG vs WebP