Lossy vs lossless compression: which to use for each image

Lossy compression makes an image smaller by permanently discarding detail the eye is unlikely to notice; lossless compression makes it smaller by storing the same pixels more efficiently, so the decoded image is identical to the original. Lossy saves far more bytes and suits photos. Lossless saves less and suits screenshots, logos, line art and anything you will edit again. This guide explains how each works, which formats use which, and how to choose for every image on a website. It is part of our guide to image optimization for the web.

Quick answer

• Lossy (JPEG, lossy WebP, AVIF): throws away fine detail and colour information. Files are much smaller; the loss is invisible at sensible quality settings.
• Lossless (PNG, GIF, lossless WebP): every pixel comes back exactly. Files are larger, but nothing degrades, however often you save.
• Photos on a website: lossy, at around quality 75–80 for WebP or JPEG.
• Screenshots with text, logos, diagrams, pixel art: lossless, or better, SVG for logos and icons.
• Masters and files you will edit again: keep a lossless original. Each lossy save loses a little more.
• Try both on awkward images such as product cut-outs or charts with photos: compare the file sizes and look at the result at the size it is shown.

What is image compression?

Image compression is any method of storing a picture in fewer bytes than its raw pixels need. An uncompressed image stores three bytes per pixel for red, green and blue (four with transparency), so a 1920 × 1080 photo is about 6.2 MB raw (1920 × 1080 × 3 bytes). The same photo as a web-quality JPEG or WebP is typically a few hundred kilobytes.

Every compression method finds redundancy in those bytes. There are two kinds of redundancy, and they give the two kinds of compression:

• Statistical redundancy. Large areas of the same colour, repeated patterns, predictable neighbours. Describing them more compactly loses nothing. That is lossless compression.
• Perceptual redundancy. Detail the human eye barely registers: tiny variations in colour, fine texture in busy areas, high-frequency noise. Removing it changes the pixels but not what you see. That is lossy compression, and it is where the large savings come from.

Almost every lossy format uses lossless techniques as its final step as well. Lossy compression decides what to throw away; lossless coding then packs what remains.

How lossless compression works

A lossless encoder looks for patterns and replaces them with shorter descriptions. A simple way to picture it: a row of 200 white pixels can be stored as "200 × white" instead of 200 separate values. Real formats are cleverer:

• PNG runs a filter on each row that predicts every pixel from its neighbours and stores only the difference, which is usually small and repetitive. It then compresses the result with DEFLATE, the same algorithm used in ZIP files.
• Lossless WebP uses a set of transforms (predicting pixels from neighbours, separating colour channels, building a local colour palette) followed by entropy coding. Google's WebP documentation reports lossless WebP files 26 % smaller than PNG on average.
• GIF uses LZW compression but is limited to 256 colours per frame, so a photo saved as GIF loses colour before the lossless step ever runs.

Because nothing is discarded, a lossless file decodes to exactly the pixels that went in. You can open it, save it and open it again a hundred times with no change. The price is size: lossless compression of a photo usually produces a file several times larger than a good lossy version, because a photo's fine noise has no simple pattern to describe.

Tools that optimise PNG files losslessly, such as oxipng or the "lossless" mode of many WordPress image plugins, try harder filter and compression settings and strip metadata. They typically save a modest share of the file, not the large reductions people expect from "compression".

How lossy compression works

A lossy encoder simplifies the image before packing it. JPEG, the classic example, does three things:

1. Converts the colours from red-green-blue into brightness (luma) and two colour channels (chroma). The eye is far more sensitive to brightness than to colour.
2. Reduces the colour resolution, usually storing one colour sample for every block of 2 × 2 pixels (chroma subsampling, written 4:2:0). Brightness stays at full resolution.
3. Transforms 8 × 8 pixel blocks into frequencies and rounds the fine, high-frequency ones coarsely. The quality setting controls how coarse that rounding is. This rounding (quantisation) is where most of the detail, and most of the bytes, disappear.

WebP's lossy mode and AVIF follow the same idea with better tools: they predict each block from the pixels around it, use variable block sizes, and apply filters that hide block edges. That is why Google reports lossy WebP files 25–34 % smaller than JPEG at the same measured quality, and why AVIF often goes further for photos.

At a sensible quality setting the result looks the same as the original at the size it is shown. Push the setting too low and the loss becomes visible as artefacts: blocky 8 × 8 squares in smooth skies, halos and "mosquito noise" around sharp edges and text, colour smearing on red and blue details, and banding in gradients.

Lossy vs lossless: side by side

WebP and AVIF can do both, which is why "WebP" alone does not tell you whether a file is lossy. AVIF's lossless mode exists but is rarely used on the web; for lossless graphics, lossless WebP or PNG usually gives smaller files and encodes faster.

When to use lossy compression

Use lossy compression for anything that looks like a photograph: product shots, portraits, landscapes, hero banners, blog images, and backgrounds. Photos contain fine noise and texture that lossless compression cannot pack well and that lossy compression removes without anyone noticing.

Good starting points, all at the size the image is actually displayed:

Go higher, around 85–90, for images people zoom into, such as product photos on a shop. Judge the result on a detailed area like hair, fabric, foliage or text on packaging. If you see smearing or blocks, raise the quality by five and compare again.

The getReport image compressor uses lossy encoding: it converts up to 50 JPEG, PNG or WebP images at a time to WebP, AVIF or a smaller JPEG at the quality you choose, scaled down to the longest side you set. It runs in your browser with the WebAssembly builds of libwebp, libavif and MozJPEG, so the files are never uploaded, and it keeps the original when the new file would be larger. It has no lossless mode; for that, use the command-line tools below.

When to use lossless compression

Use lossless compression when exact pixels matter or when the image is mostly flat colour:

• Screenshots with small text. Lossy compression blurs the edges of letters and adds halos; lossless keeps them crisp. On flat interface screenshots, lossless files are often small anyway.
• Logos, icons and illustrations with flat colours and sharp edges, when SVG is not an option. Vector SVG is better still: it is sharp at every size and usually tiny.
• Diagrams, charts and line art.
• Pixel art and anything scaled with nearest-neighbour.
• Master files. Keep the original of every image in a lossless format (or the camera original) and export web versions from it. Never edit a JPEG, save it, and edit it again: each lossy save compounds the loss, which is called generation loss.
• Images with transparency where edges must be perfect. Note that lossy WebP and AVIF also support transparency, often at a fraction of a PNG's size, so for product cut-outs try lossy first.

Is there anything in between?

Yes, and these options are often the best choice for graphics that are too large as PNG:

• Palette reduction (lossy PNG). Tools such as pngquant reduce a PNG to at most 256 carefully chosen colours, then save it as an ordinary lossless PNG. For many illustrations and screenshots the difference is hard to see and the file shrinks a lot. It is lossy in effect even though the file format is lossless.
• Near-lossless WebP. The cwebp encoder has a -near_lossless setting that adjusts pixel values very slightly to make lossless compression more effective.
• Lossless optimisation of JPEGs. jpegtran -optimize rewrites a JPEG's coding tables without touching the image data, so a JPEG can get somewhat smaller with no quality change at all. Removing metadata such as camera EXIF data is lossless too, and removes the GPS location some photos carry.

How to compress an image lossy or lossless

Commands for the free reference encoders, run in a terminal:

# Lossy WebP at quality 80
cwebp -q 80 photo.jpg -o photo.webp

# Lossless WebP (maximum effort)
cwebp -lossless -z 9 screenshot.png -o screenshot.webp

# Lossy AVIF (quality 0–100, higher is better)
avifenc -q 60 photo.jpg photo.avif

# Lossless PNG optimisation, stripping safe-to-remove metadata
oxipng -o 4 --strip safe diagram.png

# Palette-reduced PNG, keeping quality between 65 and 80
pngquant --quality=65-80 illustration.png

# Lossless JPEG optimisation
jpegtran -copy none -optimize -progressive photo.jpg > photo-opt.jpg

In an image editor, the choice hides in the export dialog: "Quality" sliders mean lossy; PNG and "Lossless" checkboxes mean lossless. WordPress image plugins usually call their modes "lossless", "lossy" and sometimes "glossy" in between; the comparison of image optimisation plugins explains what each vendor means. For the whole routine of resize, format, compress and strip metadata, including steps in Windows Photos, Paint and Mac Preview, follow how to reduce image file size.

How to check what your pages serve

The image size checker lists up to 100 images on a page with their file size, format, real and displayed dimensions, and flags files over 300 KB and images more than twice their displayed size. A photo served as a large PNG is the classic sign that lossless compression was used where lossy belongs.

Common mistakes

• Photos saved as PNG. Lossless storage of a photo produces huge files with no visible gain. Use WebP, AVIF or JPEG.
• Logos and screenshots saved as low-quality JPEG. Text and sharp edges get fuzzy halos. Use SVG, PNG or lossless WebP.
• Assuming "WebP" means small. A lossless WebP of a photo is still large. Check which mode the tool used.
• Re-compressing already compressed images. Running a lossy JPEG through another lossy step loses detail and often saves little. Export once from the original.
• Judging quality zoomed in to 400 %. Every lossy image shows artefacts at that zoom. Judge at the size the page displays it.
• Compressing without resizing. The biggest saving usually comes from pixel dimensions, not from the compression mode. See image sizes that do not hurt.

Questions people ask

Which is better, lossy or lossless compression?

Neither is better in general; they suit different images. Lossy compression is better for photos, because it makes files many times smaller with no visible difference at quality 75–80. Lossless is better for screenshots, logos, diagrams and master files, where exact pixels matter and flat colours compress well. Most websites should serve photos lossy and graphics lossless or as SVG.

Is JPEG lossy or lossless?

JPEG as used on the web is lossy: it discards fine detail and colour resolution, and the quality setting controls how much. The JPEG standard does define a lossless mode, but browsers and cameras almost never use it. Every time you edit and re-save a JPEG it loses a little more, so keep a lossless or camera original and export JPEGs from that.

Is PNG lossy or lossless?

PNG is lossless: the file decodes to exactly the pixels that were saved. Tools such as pngquant can make a PNG much smaller by reducing it to a palette of 256 colours first, which is a lossy step, but the resulting file is still a normal PNG. That is why two PNGs of the same image can differ greatly in size and in quality.

Does lossy compression reduce image resolution?

No. Lossy compression keeps the same width and height in pixels; it reduces detail within those pixels, such as fine texture and colour precision. The resolution only changes if you resize the image, which is a separate step. On a website, do both: resize to the displayed width, then compress lossy for photos.

Can you undo lossy compression?

No. The detail a lossy encoder discards is gone for good, and converting the file to a lossless format such as PNG only preserves the damage in a larger file. Sharpening and AI upscaling tools can make a compressed image look better, but they invent detail rather than restore it. Keep the original file and export compressed copies from it.