What quality setting should I use?

For photos on a website, 70–80% is the usual sweet spot — the file is much smaller and the loss is invisible at screen size. Drop to 60% only if you need every kilobyte and the image isn't the focal point.

Is it better to resize or to compress?

Do both, resize first. There's no point serving a 6000-pixel photo into a 1200-pixel slot — shrink the dimensions to what's actually displayed, then compress the result to trim what's left.

Does compressing the same image twice make it worse?

Yes. Every lossy re-save discards a little more detail and can add blocky artefacts. Keep the original, and always compress from it rather than from a previous compressed copy.

How to compress images for the web without them looking bad

Useful Hacks Team·August 29, 2026

Images are almost always the heaviest thing on a web page. Text and code are kilobytes; a single un-optimised phone photo can be 4–8 MB. Getting those down is the biggest single win for load time and Core Web Vitals.

Compress Image

Reduce image file size while controlling quality — one image or a whole batch.

Open Compress Image

What actually makes an image file big

Pixel dimensions. A 4000×3000 photo has 12 million pixels to store. The same photo at 1600×1200 has under 2 million — before you compress anything.
Format and quality. JPEG and WebP throw away detail your eye is unlikely to miss; how much they throw away is the quality setting. PNG keeps everything, which is why photos saved as PNG are huge.
Unnecessary data. Camera metadata, thumbnails and colour profiles add weight without changing how the image looks.

A repeatable process

1. Resize to the display size. If the image is shown at most 1200px wide, there's no reason to ship more. Use Resize Image with the aspect ratio locked.
2. Pick the right format. Photos: JPEG or WebP. Graphics with flat colour, text or transparency: PNG or WebP. Image Converter moves between them.
3. Compress with a target in mind. Open Compress Image, lower the quality slider, and watch the live size readout until it's under your budget.
4. Check it at 100%. If edges look mushy or the sky has visible bands, nudge the quality back up a little.

Rough size budgets

Hero / full-width photo: aim for under 200 KB.
In-content photo: under 100 KB.
Thumbnail: under 30 KB.

These aren't rules, just a sanity check — if a content image is over 500 KB, something upstream (dimensions or format) is wrong.

Do it now

Open Compress Image, drop your file in, and pull the quality slider down until the size fits.

Frequently asked questions

What quality setting should I use?: For photos on a website, 70–80% is the usual sweet spot — the file is much smaller and the loss is invisible at screen size. Drop to 60% only if you need every kilobyte and the image isn't the focal point.
Is it better to resize or to compress?: Do both, resize first. There's no point serving a 6000-pixel photo into a 1200-pixel slot — shrink the dimensions to what's actually displayed, then compress the result to trim what's left.
Does compressing the same image twice make it worse?: Yes. Every lossy re-save discards a little more detail and can add blocky artefacts. Keep the original, and always compress from it rather than from a previous compressed copy.

Related guides

How to resize an image without losing quality
What 'without losing quality' really means when you resize, why enlarging is different from shrinking, and how to keep proportions intact.
JPG, PNG or WebP: which image format should you use?
A practical guide to picking an image format — what each one is good and bad at, and when to convert.
How to resize a photo and signature for online forms
Application portals want the photo and signature at exact pixel sizes and tiny file sizes. Here's how to hit both without an app.