How to Compress Images for the Web Without Losing Quality

Image compression is one of those tasks that almost every web developer, designer, marketer, and casual blogger has to do at some point — and which almost everyone gets at least slightly wrong. Either the file is too big and the page loads slowly, or the file is small but the image looks like it has been through a fax machine. The good news is that the decisions involved are not actually that complicated; the bad news is that the defaults in most software are tuned for the wrong job. This guide walks through the small set of choices that produce small files without visible quality loss, and the few traps that catch people out.

Compression is not the same thing as resizing

Before we talk about quality, it is worth being precise about terminology, because mixing these up causes most of the pain in this area.

• Resizing changes the pixel dimensions of an image — a 4000×3000 photo becomes a 1200×900 photo. Fewer pixels means a smaller file, but you lose information that you cannot get back.
• Compression keeps the pixel dimensions the same but reduces the amount of data needed to store them. Lossless compression (PNG, WebP lossless) keeps every pixel exactly. Lossy compression (JPEG, WebP lossy, AVIF) discards some visual information that the human eye is not very good at noticing.

The single biggest mistake people make is uploading a 4000-pixel-wide photo to a blog post that displays at 800 pixels wide, then "compressing" it. The result will still be three times larger than necessary, because the actual problem was that the image was the wrong size, not the wrong quality. Resize first, compress second. Use the Image Resizer to bring it down to the maximum size it will be displayed at — typically 1200–1600 pixels on the long edge for full-width hero images, less for thumbnails — then send the resized version through the Image Compressor.

Choosing the right format

Format is the next most important decision, and the right choice depends almost entirely on what is in the image.

Photographs and detailed scenes: JPEG, WebP, or AVIF

Photographs are full of subtle gradients and noise that the eye tolerates a lot of variation in. JPEG was designed for exactly this case, and at quality 80–85 a JPEG is typically indistinguishable from the original at a fraction of the size. WebP, supported by every modern browser since 2020, is roughly 25–35% smaller than JPEG at the same visual quality. AVIF goes a step further, often saving another 20% on top, at the cost of slower encoding.

For a typical blog or marketing site, WebP is the pragmatic choice today: small files, universal browser support, and easy to produce. Reach for AVIF only when the site is image-heavy and the saving matters.

Logos, screenshots, diagrams: PNG or SVG

Anything with sharp edges, large flat areas of colour, text, or transparency belongs in PNG (or SVG, when you have the source). JPEG will surround every letter and edge with a faint grey halo — this is the "ringing artefact" that gives away a JPEG-of-a-screenshot every time. PNG is lossless, so a screenshot saved as PNG will look exactly like the original. WebP also has a lossless mode and is usually 20–30% smaller than PNG for the same image.

For logos and icons that are vector in origin, keep them as SVG and only convert with the SVG to PNG converter when a specific consumer (a favicon set, an email client, a legacy CMS) cannot render SVG.

Animated content: WebP or AVIF, almost never GIF

Animated GIFs are charming but disastrously inefficient — a five-second animation can easily run to 5 MB. The same animation as an animated WebP or as an MP4 video will be a tenth of the size, often less, with better colour. Only keep GIF when the consumer cannot handle anything else, which today is mostly older email clients.

Picking a quality level

Quality sliders go from 1 to 100, but in practice only a small slice of that range is useful.

• Below 50: visible blockiness, banding in skies, smearing on faces. Avoid except for deliberate aesthetic effect.
• 60–75: usable for thumbnails and below-the-fold images on sites where total weight matters more than fidelity.
• 75–85: the sweet spot for the vast majority of web photos. Most viewers cannot tell the difference from the original at normal viewing distance, and file size is typically 70–85% smaller.
• 85–95: for hero images, e-commerce product shots, and anywhere the image is the point of the page. The file is bigger but stays well under what an uncompressed equivalent would be.
• Above 95: diminishing returns. The file gets much larger but the visible improvement is negligible. Only useful when you are going to re-edit the image later.

Start at 80 and trust your eyes. Open the compressed version next to the original at 100% zoom and see if you can spot a difference. If you cannot, go lower. If you can, go higher.

The order of operations

For a typical web image, the workflow that produces the best size-to-quality ratio is:

1. Crop to the aspect ratio you actually want, using the Image Cropper. Empty margins are wasted bytes.
2. Resize to the maximum displayed dimension with the Image Resizer. There is no point in delivering 4000 pixels when 1200 will be displayed.
3. Convert to the right format with the Image Converter: WebP for photos, PNG (or lossless WebP) for screenshots and logos.
4. Compress at quality 80 with the Image Compressor, then adjust up or down based on a visual check.

For social media images, where each network has its own preferred dimensions, the Social Image Resizer skips the manual maths.

Common traps

Compressing twice

Lossy compression is not idempotent. Every time you save a JPEG you lose a little more information. If you are going to edit an image, keep an uncompressed master (PSD, TIFF, or maximum-quality PNG) and only export the compressed version when you publish. Re-editing a compressed JPEG and saving it again is how images develop that characteristic mottled look over years.

Compressing screenshots as JPEG

Screenshots are the wrong shape for JPEG's assumptions. The compressor wastes bytes trying to preserve gradients that do not exist, while introducing artefacts in the text. PNG or lossless WebP for anything containing text, UI chrome, or hard edges.

Forgetting the alpha channel

Transparent PNGs converted to JPEG lose their transparency, which usually means the previously-transparent area becomes solid black. If you need to keep transparency, your only widely-supported lossy option is WebP.

Running the same image through three different tools

Each tool will recompress the result of the previous one, accumulating artefacts. Pick one tool, do all the operations there, and only export once.

What about the "Save for Web" option in older software?

Photoshop's legacy "Save for Web" dialog and similar features in other tools were built before WebP and AVIF existed, and they default to JPEG quality 60 — too low for most modern uses. They are still usable, but the format choices are dated. A modern in-browser tool like the ones above will almost always produce smaller, better-looking files with less effort.

The quick reference

• Photo for the web → resize to display size → WebP at quality 80.
• Screenshot → PNG, or lossless WebP if every byte counts.
• Logo or icon → keep as SVG; PNG only when SVG is not accepted.
• Animation → animated WebP or short MP4, not GIF.
• Always resize before compressing. Always.
• Keep an uncompressed master so you can re-export later.

Done correctly, the resulting images will be a fraction of their original size with no visible quality loss — and your pages will load noticeably faster, which is the whole point of the exercise.