Lossy vs. Lossless Image Compression: Choosing the Right Settings for Web Performance

By Marcus Vane · September 30, 2026 · Design

Images are the heaviest part of most pages, and the compression choice you make decides both file size and visible quality. The right setting depends on the content, not a single rule.

On a typical web page, images account for more bytes than everything else combined, which makes compression the single most effective performance lever available. The choice between lossy and lossless, and the quality setting within lossy, determines how much weight you shed and whether the result still looks right. The mistake most people make is treating it as a single decision, when it is really a decision per image based on what the image contains.

In this article:

How lossy and lossless compression differ

Lossless compression packs the image data more efficiently without discarding anything, so the decoded image is pixel for pixel identical to the original. The saving is modest, typically ten to thirty percent, because it cannot throw away information the eye does not notice. Lossy compression discards information that is perceptually unimportant, achieving far smaller files at the cost of irreversible change. The art of lossy compression is discarding exactly what the eye tolerates and nothing more.

Because lossy is irreversible, the rule is to keep a master copy and export compressed versions from it. Repeatedly opening, editing and re saving a lossy file compounds artifacts, a process called generation loss that gradually erodes detail even at high quality settings.

Which format for which content

Photographic content with smooth gradients and fine detail is best served by lossy compression, historically JPEG and increasingly the newer AVIF and WebP formats, which deliver dramatically smaller files at equivalent visual quality. Graphics with flat areas of color, sharp edges and limited palettes, such as logos and diagrams, are best served by lossless compression, historically PNG and now also WebP or AVIF in lossless mode, because lossy compression introduces visible ringing and banding around the edges that flat graphics make obvious.

Images with transparency need a format that supports an alpha channel, which rules out JPEG. PNG, WebP and AVIF all support transparency, with WebP and AVIF offering much smaller files for the same result.

Worked examples choosing settings

Example one: a hero photograph

A full width hero photograph exported as a high quality JPEG might weigh four hundred and fifty kilobytes. Exporting the same image as an AVIF at a visually equivalent quality brings it to roughly one hundred and twenty kilobytes, a saving of over seventy percent with no perceptible difference at typical viewing distance. The right choice is the modern format with a JPEG fallback for older browsers, served via a picture element.

Example two: a logo with transparency

A brand logo with a transparent background exported as JPEG would lose its transparency and gain visible artifacts around the edges. Exported as a PNG it preserves both perfectly but may weigh eighty kilobytes. As a lossless WebP it weighs around forty kilobytes for the same pixel perfect result. The right choice is lossless, in the most efficient lossless format the browser supports.

Example three: a screenshot of a text heavy interface

A screenshot contains sharp text and flat backgrounds, which lossy compression smears. At a JPEG quality of seventy the text develops visible ringing and the file is still sixty kilobytes. As a PNG it is crisp and forty kilobytes. For screenshots, lossless is both smaller and better, because the content has almost no perceptually redundant detail for lossy compression to exploit.

Common mistakes

FAQ: compression edge cases

What quality setting should I use?

There is no universal number. For photographs, a quality around seventy to eighty for JPEG or its equivalent for modern formats is a common starting point, but the right value depends on the image and the display size. Inspect the result at the size it will be shown, not at full zoom, and lower the quality until you notice a problem, then step back up.

Is WebP always better than JPEG?

For photographs, WebP is usually smaller at equivalent quality. For very simple images the difference shrinks, and tooling support varies. Serve the best format each browser supports using the picture element rather than committing to one.

Should I compress before or after resizing?

Resize first, then compress. Resizing reduces the pixel count, which is the largest saving, and compressing the smaller result is faster and more effective than compressing then shrinking.

Wrapping up

Match the compression to the content: lossy for photographs, lossless for graphics and screenshots, and always resize to the display dimensions before compressing. Keep a master, export from it, and serve the best format each browser supports. That sequence is worth more than any single quality number.

Resize and prepare images for the web in bulk.

Try the Bulk Image Resizer tool.

SwiftMultiTool — free online tools for everyone. Home · Blog · About · FAQ · Contact