How to Compress Images for the Web Without Losing Quality

Images are usually the heaviest thing on a web page. A single unoptimized photo straight from a phone camera can weigh several megabytes — more than all the text, code, and styling on a site combined. Compressing images is the highest-impact change most people can make for page speed, and done well it's invisible to visitors. This guide covers how image compression works and how to shrink files without a noticeable drop in quality.

Why image size matters

Every extra kilobyte is data a visitor's browser has to download before it can show your page. On a fast desktop connection that might not be noticeable, but on mobile networks it directly increases load time, frustrates users, and hurts search rankings — Google uses page experience signals like loading speed as a ranking factor. Smaller images mean faster pages, lower bandwidth bills, and happier visitors.

Lossy vs. lossless compression

There are two fundamentally different ways to make an image file smaller.

Lossless compression

Lossless methods pack the data more efficiently without throwing anything away — decompressing gives you back a pixel-perfect copy of the original. It's safe but the savings are modest, typically 10–50%. PNG uses lossless compression, which is why it's great for logos, screenshots, and graphics with sharp edges and flat colors.

Lossy compression

Lossy methods discard information the human eye is unlikely to notice — subtle color variations, fine detail in busy areas — to achieve much larger savings, often 70–90%. JPEG and WebP use lossy compression. The trade-off is controlled by a quality setting: lower quality means a smaller file but more visible artifacts. For photographs, lossy compression at a sensible quality level is almost always the right choice.

Choosing the right format

The format you pick matters as much as the compression level:

• JPEG — the workhorse for photographs. Widely supported everywhere. Good compression, but no transparency.
• PNG — best for graphics with sharp lines, text, or transparency (logos, icons, screenshots). Lossless, so photos come out large.
• WebP — a modern format that typically produces files 25–35% smaller than JPEG at the same visual quality, and supports transparency like PNG. Supported by all current browsers. For most web images today, WebP is the best default.
• SVG — not a compressed photo format at all, but for simple logos and icons a vector SVG stays razor-sharp at any size and is often just a few kilobytes.

How much quality can you trade?

For lossy formats, quality is usually expressed on a 0–100 scale. Counter-intuitively, the top of that range is wasteful: the difference between quality 100 and quality 80 is often impossible to see, yet quality 80 can be half the file size. A practical starting point:

• Quality 75–85 — the sweet spot for most web photographs. Big savings, no visible loss for typical viewing.
• Quality 60–75— fine for large background images or thumbnails where absolute crispness isn't critical.
• Below 60 — savings taper off while artifacts (blocky skies, halos around edges) become noticeable. Usually not worth it.

The best approach is to compare, not guess. Compress at a given quality, look at the result at the size it will actually be displayed, and step the quality down until you can just start to see a difference — then step back up one notch.

Resize before you compress

Compression can only do so much if the image is far larger than it needs to be. A 4000-pixel-wide photo displayed in a 800-pixel-wide column is carrying five times more pixels than anyone will ever see. Resizing the image to roughly the dimensions it's shown at — then compressing — is often the single biggest saving of all. Our image resizer handles cropping, rotating, and resizing in one pass, entirely in your browser.

A simple workflow

1. Resize the image to the largest size it will be displayed at.
2. Choose WebP if you can, JPEG for maximum compatibility, PNG for graphics with transparency.
3. Compress at quality ~80 and view the result at display size.
4. Nudge quality down until you notice a difference, then back up one step.

You can do the last three steps in seconds with our image compressor: drop in one or many images and they're compressed instantly on your own device — nothing is uploaded to a server, so it's safe for private photos. Compare the before and after sizes, and download when you're happy with the result.