How to Compress Images for a Faster Website

Images are almost always the heaviest thing on a web page. On a typical site they account for more than half of the total bytes downloaded — usually far more than the code. That makes image compression the single highest-leverage speed optimisation available to most people: no rewriting, no new framework, just smaller files. This guide explains how compression actually works, how to choose settings that cut size dramatically without visible loss, and the mistake that undermines almost every compression effort.

Why it matters more than you think

Page speed is not a vanity metric. It affects three things directly:

• Rankings. Google uses Core Web Vitals as a ranking signal, and the most important one — Largest Contentful Paint (LCP) — is very often an image. LCP measures how long the biggest visible element takes to appear. If that is a 4 MB hero photo, your LCP is bad, full stop.
• Conversions. Every additional second of load time measurably increases the share of visitors who give up and leave.
• Cost and reach. A large share of the world browses on mobile data. A page that costs 8 MB to open is a page many people will never see.

Lossy vs. lossless: the fundamental choice

There are two families of compression, and understanding the difference is most of the battle.

Lossless compression stores the image more efficiently but keeps every pixel exactly. Decompress it and you get back a bit-for-bit identical image. PNG works this way. Savings are modest — perhaps 5–20%.

Lossy compression achieves far bigger savings by actually discarding information — specifically, information the human eye is bad at noticing. JPEG and WebP work this way. Savings of 70–90% are routine.

The key insight is that lossy does not mean “visibly worse.” Human vision is much more sensitive to brightness than to fine colour detail, and much better at seeing large shapes than subtle texture. Lossy compression targets exactly these blind spots. At sensible settings, the discarded data is data you genuinely cannot see.

The quality slider: where the magic is

Most compressors give you a quality setting from 0 to 100. The relationship between that number and the file size is not linear, and that is what you can exploit.

• 100 — enormous files, no visible benefit over 90. Essentially a waste.
• 80–85 — the sweet spot for most photos. Typically 70–80% smaller than the original with no difference the eye can detect.
• 60–75 — still fine for most web use. Artefacts become findable if you go hunting for them.
• Below 50 — visible blockiness and mushy detail, especially around sharp edges.

Practical advice: start at 80 and look at the result. If it looks perfect — and it usually does — try 75. Compare side by side at 100% zoom, not zoomed in, because nobody views your site zoomed in.

The mistake everyone makes: compressing without resizing

This is the big one. People compress a 4000×3000 photo down to 800 KB, feel good about it, and then display it in a slot that is 800 pixels wide.

The browser still downloads all 12 million pixels, then throws most of them away to draw an 800-pixel image. You paid the full bandwidth cost for detail that is literally impossible to see.

Always resize to the display size first, then compress. This single step usually saves more than the compression does. A 4000-pixel-wide photo resized to 1600 pixels already has 84% fewer pixels before you have compressed anything at all.

A good rule: resize to roughly twicethe display width, which covers high-density “retina” screens without going overboard. Displaying at 800 pixels? Export at 1600.

Choose the right format

Format choice can matter as much as the quality setting:

• JPEG — photographs and anything with continuous tones and gradients. Do not use it for screenshots or logos.
• PNG — logos, icons, diagrams, screenshots, and anything needing transparency. Lossless, so text and sharp edges stay crisp.
• WebP — the modern default. It handles both photographic and flat-colour content, supports transparency, and is typically 25–35% smaller than JPEG at the same visual quality. Every current browser supports it.

If you take one action from this article beyond resizing: convert your JPEGs and PNGs to WebP. It is often a free 30% saving for no visible change.

Special cases worth knowing

• Screenshots. Never save these as JPEG. Lossy compression smears small text into a fuzzy mess. Use PNG or WebP.
• Logos and flat graphics. Large areas of a single colour compress superbly with PNG and badly with JPEG, which adds noise around the edges.
• Images containing text. Sharp edges are exactly what lossy compression handles worst. Prefer lossless, or use a high quality setting.
• Photos with heavy noise or grain. These compress poorly, because noise is random and random data cannot be predicted away. Denoise first if the file must be small.
• Thumbnails. Can be compressed far harder than you would dare on a full-size image — at small display sizes, artefacts are essentially invisible.

Strip the metadata too

Photos from a phone or camera carry EXIF metadata: camera model, lens, exposure settings, a timestamp — and often GPS coordinates of where the photo was taken. This can add tens of kilobytes to every image, and publishing your home address alongside a photo of your living room is a real privacy problem, not a theoretical one. Most compressors strip this by default; it is worth confirming that yours does.

A practical workflow

1. Decide the display size — the actual pixel width the image occupies on screen.
2. Resize to roughly twice that width.
3. Choose the format — WebP for almost everything; PNG if you need lossless or transparency.
4. Compress at quality 80, then compare against the original at 100% zoom.
5. Push lower if it still looks perfect. Back off if artefacts appear.
6. Confirm the metadata is stripped.

Follow this and a 5 MB camera photo routinely becomes a 120 KB WebP that looks identical on screen — a 97% reduction. That is the difference between a page that feels instant and one that does not.

Frequently asked questions

Can I recover quality after compressing? No. Lossy compression is one-way — the discarded data is gone. Always keep your originals and compress a copy.

Does compressing twice make it worse? Yes. Each lossy save re-encodes the image and compounds the artefacts. Always compress from the original, never from an already-compressed version.

How small should my images be? As a target, keep most web images under 200 KB and hero images under about 300 KB.

Is compressing in the browser safe?Yes — and it is more private, because your photos are never uploaded to anyone's server.

Compress your images now

Use our Image Compressor to shrink photos in your browser — no upload, no sign-up, and your files never leave your device. Resize first with the Image Resizer, and switch format with the Image Converter. Not sure which format to pick? Read PNG vs JPG vs WebP.