Image Compression: Lossy vs Lossless — When to Use Each

Every image you encounter on the web has been compressed — the question is whether that compression is lossless (identical pixels, smaller file) or lossy (smaller file, different pixels). Choosing the wrong one gives you either a bloated file or a visibly degraded image. This guide walks through what each method actually does to your pixels, when to use which, and how to get the best result without paying for software.

Lossless compression: smaller file, same pixels

Lossless compression shrinks the file size without changing a single pixel. When you decompress the image and compare it to the original, every pixel is identical. The technique works by finding patterns in the pixel data and encoding them more efficiently — similar to how a ZIP file works on text.

PNG is the most common lossless format. A PNG of a screenshot or a logo with flat colors compresses extremely well because there are long runs of identical pixels. That same PNG of a photograph compresses poorly because photographs have almost no repeating pixel runs — every pixel is slightly different from its neighbor.

The takeaway: lossless compression is great for graphics and terrible for photographs. A 5 MB photo saved as PNG stays around 4.8 MB — not useful.

Lossy compression: smaller file, different pixels

Lossy compression discards visual information that the human eye is less likely to notice. JPEG is the classic lossy format — it works by converting the image into frequency data, then throwing away high-frequency detail (subtle color variations and sharp edges) beyond a threshold you set.

At quality 95, a JPEG is almost indistinguishable from the original and roughly 80-90% smaller than an equivalent PNG. At quality 50, you will notice softening and compression artifacts — blocky 8×8-pixel squares visible in areas of smooth color like skies and skin. At quality 10, the image becomes a mosaic of blocks.

What happens at each JPEG quality level

These ratios assume a photograph. A flat-color graphic has very different numbers — and a different format (PNG or WebP lossless) is a better choice.

Format-specific compression strategies

JPEG — the quality slider

JPEG compression has one main control: the quality setting, typically 0-100. Lower quality = more data discarded = smaller file. Every time you re-save a JPEG, you compound the loss — the image gets softer each generation. Always compress from the original, never from an already-compressed JPEG.

PNG — quantization

PNG is lossless by default, but you can apply lossy quantizationbefore the lossless compression step. Quantization reduces the number of unique colors in the image (e.g., from 16 million to 256), which lets the lossless encoder find more patterns. Tools like pngquant do this intelligently — a posterized palette-8 PNG of a photograph can be 80% smaller than the true-color PNG while looking nearly identical at screen resolution.

WebP — both modes in one format

WebP supports both lossy and lossless compression. Its lossy mode beats JPEG by roughly 25-35% at the same visual quality. Its lossless mode typically beats PNG by 25%. The trade-off is compatibility — Safari only added WebP support in 2020, so very old devices may not display it. For most 2026 audiences, WebP is the default recommendation.

When file size matters more than quality

There are situations where size trumps fidelity, and compressing aggressively is the right call:

• Email newsletters. Many email clients block images above 1 MB. Keep hero images under 200 KB.
• E-commerce product grids. A page with 48 product thumbnails at 500 KB each loads 24 MB. At 30 KB each, it loads 1.4 MB — a 17× improvement in perceived speed.
• Mobile-first audiences. Users on 4G or spotty connections will abandon a page that takes more than 3 seconds to load. Compressed images are the single biggest lever for Core Web Vitals.

Batch compression strategies

Compressing one image at a time is fine for a blog post. For a product launch with 200 images, you need a batch workflow:

1. Group by use case. Separate hero images (quality 85-90), thumbnails (quality 60, resized to 300px), and social media (quality 80, exact platform dimensions).
2. Resize first, compress second. A 6000×4000 photo resized to 1200×800 and then compressed to JPEG 80 is 90% smaller than the original compressed at full resolution. Use an image resizer first.
3. Use a consistent quality setting across a batch. Pick one quality for each use-case group and apply it uniformly. Do not tweak per-image — you will drive yourself mad.
4. Spot-check 5% of outputs. Open the smallest few files and the largest few files to make sure nothing went wrong.

Lossy vs lossless: the decision tree

• Photographs: Lossy (JPEG or WebP). Lossless offers almost no size savings for photos.
• Logos, icons, line art: Lossless (PNG or WebP lossless). Lossy creates visible artifacts on sharp edges and flat colors.
• Screenshots: Lossless PNG. Text in screenshots looks blurry and unprofessional with lossy compression. If the screenshot is huge, try PNG quantization first.
• Need transparency: Lossless PNG or lossless WebP. JPEG does not support transparency. (Lossy WebP supports alpha, but edges can artifact.)
• Archival master: Lossless, always. Keep a lossless master copy and generate lossy derivatives for distribution.

For a deeper look at format selection, see our guide to web image formats, which covers PNG vs JPEG vs WebP vs AVIF with real benchmarks. If you need to resize images before compressing, our resize guide covers common dimension presets and batch workflows.