How to Compress Images for Web in 2026 (Without Losing Quality)

Image compression is the single highest-return optimisation most websites can make, and it is also the one most often done wrong. The goal is not the smallest possible file. The goal is the smallest file that still looks correct at the size it will actually be displayed. Those are very different targets.

Lossy and lossless are not good and bad

Lossy compression discards detail the human eye is unlikely to notice, which is why it can cut a photo by 70 percent or more. Lossless compression rewrites the file more efficiently without discarding anything, which typically saves 10-30 percent. Photographs should almost always be lossy. Screenshots of text, line art, logos and diagrams should be lossless, because lossy compression creates visible smudges around sharp edges.

Resize before you compress

Compression removes detail inside the image. Resizing removes pixels that were never going to be displayed. Resizing almost always wins. If a page displays an image at 800 px wide, serving a 3000 px original wastes roughly 90 percent of the transferred pixels. As a practical starting point: 1920 px for full-width hero images, 1200 px for in-article images, 800 px for cards and 400 px for thumbnails.

Choosing a format in 2026

• WebP: the default choice for photos, screenshots and most graphics. Universally supported, typically 25-35 percent smaller than JPEG at matching quality.
• JPEG: still useful for maximum compatibility with older clients, some email templates and legacy CMS upload fields.
• PNG: keep for transparency, sharp text and exact pixel reproduction. Do not use it for photographs.
• SVG: use for logos, icons and any flat illustration that must stay sharp at every size. It scales without loss and is usually only a few kilobytes.
• AVIF: excellent compression, but encoding is slower and some older clients still lack support. Treat it as a progressive enhancement, not the only source.

Reading a compression result correctly

The number that matters is not percentage saved, it is the size of the file that will actually be served. Compare the exported size against a budget: 100-200 KB for a standard in-article image, 250-400 KB for a full-width hero, under 100 KB for anything appearing in a list or card. If a file is far above budget, check the pixel dimensions before touching the quality slider again, because the problem is usually resolution rather than compression.

A five-minute routine that prevents most problems

1. Start from the original file, never from an already exported one.
2. Crop and resize to the display size, plus a small margin for high-density screens.
3. Choose WebP for photos and PNG or SVG for sharp graphics.
4. Compress, then view the result at 100 percent next to the original.
5. Check the exported file size against the budget above before uploading.