Lossy vs Lossless Compression: What's the Difference?

Pick up any JPEG, and you have already taken a side in the lossy vs lossless compression debate — probably without realizing it. Most developers understand the basic split ("JPEG = lossy, PNG = lossless") but stop there. That mental model breaks the moment you encounter WebP or AVIF, both of which support both modes. And it leaves you guessing on the question that actually matters: which type is right for this specific image?

This article covers how each compression type works under the hood, shows real file size data across quality levels, and gives you a decision framework you can apply immediately.

What Is Lossy Compression?

Lossy compression permanently discards image data to achieve smaller file sizes. The discarded data is gone — you cannot recover original pixel values from a lossy-compressed file. What makes lossy compression smart (rather than just destructive) is which data it throws away: information the human visual system is least likely to notice.

How it works conceptually — JPEG's DCT approach:

1. The image is divided into 8×8 pixel blocks.
2. Each block is transformed using the Discrete Cosine Transform (DCT) — converting pixel values into frequency components (similar to a Fourier transform but for spatial data).
3. High-frequency components (fine detail, sharp edges at small scales) are quantized more aggressively than low-frequency components (broad color gradients, large shapes).
4. The quantized data is then entropy-coded (Huffman coding) to remove statistical redundancy.

The "quality" setting you choose controls how aggressively step 3 quantizes the frequency components. Quality 95 discards almost nothing. Quality 40 discards a lot — block artifacts become visible, especially at edges.

WebP's lossy mode uses VP8 — the same codec as VP8 video but applied to still images. VP8 uses a similar block-based transform approach but with adaptive quantization (it can vary compression strength across different regions of the same image) and more sophisticated intra-prediction. The result is better quality at the same file size compared to JPEG, especially in areas with fine texture.

AVIF's lossy mode uses AV1 — the most sophisticated of the three. AV1 supports variable block sizes (from 4×4 up to 128×128), multiple transform types, and advanced perceptual optimization. The tradeoff: encoding is slow. AVIF can outperform JPEG by 50% at the same visual quality, but generating an AVIF at high quality can take seconds rather than milliseconds.

What lossy compression costs you: Artifacts accumulate. Re-saving a JPEG from a JPEG adds more artifact layers — each generation degrades further. Always keep your source files lossless; lossy encoding should be a one-way export step.

What Is Lossless Compression?

Lossless compression reduces file size without discarding any image data. Decompress a lossless file and you get back the exact original pixel values — every R, G, B, and alpha channel value is preserved.

How it works conceptually — PNG's DEFLATE approach:

PNG uses a two-step process:

1. Filtering: Before compression, each row of pixels is processed with one of five filters (None, Sub, Up, Average, Paeth). The goal is to transform raw pixel values into differences or predictions that have lower entropy — smaller numbers that compress better. The encoder can choose a different filter for each row.
2. DEFLATE compression: The filtered data is compressed with DEFLATE — a combination of LZ77 (finding repeated byte sequences and replacing them with back-references) and Huffman coding (assigning shorter bit sequences to more frequent symbols). This is the same algorithm used in gzip and zlib.

PNG's compression quality setting (0-9 in zlib) controls DEFLATE effort, not image quality. A PNG at compression level 0 (no compression) and level 9 (maximum compression) contains identical image data — just stored more or less efficiently. Level 9 takes longer to encode but produces a smaller file with zero quality difference.

WebP's lossless mode uses VP8L — a different codec from VP8 lossy. VP8L uses a combination of spatial prediction, color transform, subtraction of green channel, color indexing, and LZ77 + Huffman coding. It consistently outperforms PNG on lossless compression: typically 26% smaller for photographic content, less dramatic gains for images with large flat areas.

AVIF's lossless mode uses AV1 lossless — available, but rarely the right choice. AV1 lossless is slower to encode than PNG or lossless WebP and doesn't consistently produce smaller files. Use lossless WebP instead of lossless AVIF in practice.

Lossy vs Lossless: Side-by-Side Comparison

Real file size data — the same 2000×1333 photograph compressed with different methods:

And a 800×600 UI screenshot (flat colors, sharp text):

The pattern: lossy wins heavily on photos. Lossless wins on graphics with flat colors and sharp edges.

When to Use Lossy Compression

Use lossy compression when:

• The image is a photograph or photorealistic rendering. Photos have natural grain and complex gradients that hide compression artifacts. A JPEG or lossy WebP at quality 75-85 is visually indistinguishable from the original to most viewers.
• File size matters more than pixel-perfect accuracy. Hero images, blog post photos, product thumbnails, social media previews — these need to load fast. Shaving 300 KB from a hero image has measurable impact on Core Web Vitals.
• The image will only be encoded once. Lossy degradation compounds on re-encode. If you control the pipeline end-to-end and the file is the final export, lossy is fine.
• You are serving video frames or animated content. Animation in WebP (lossy) or video-derived formats inherently uses lossy compression.

Practical settings:

• JPEG: quality 75-85 for most web photos. Quality 60 for thumbnails and preview images where bandwidth is critical.
• Lossy WebP: quality 75-82 produces roughly the same visual output as JPEG 85, at about 25-35% smaller file size.
• Lossy AVIF: quality 55-65 produces output matching JPEG 80-85 perceptually, at roughly 40-50% smaller. Use Pixotter's compression tool to find the right quality level without manual trial-and-error.

When to Use Lossless Compression

Use lossless compression when:

• The image contains text, sharp lines, or UI elements. Lossy compression creates visible ringing artifacts around high-contrast edges — exactly what text and icons have. A blurry "Submit" button is a UX failure.
• The image will be re-edited or re-exported. Working files, source assets, anything that will be opened, modified, and re-saved should be lossless. Lossy chains degrade every generation.
• You need exact color reproduction. Medical imaging, scientific visualization, print preparation, and professional photography archives all require bit-exact pixel values.
• The image has large flat-color areas. Logos, diagrams, charts — DEFLATE or VP8L can compress these dramatically without any quality tradeoff.
• Transparency with sharp edges. PNG's lossless alpha channel gives clean, hard edges. Lossy alpha compression introduces fringing that looks terrible on overlaid UI elements.

Format choices for lossless:

• Lossless WebP — first choice for web delivery. Consistently smaller than PNG (typically 26%), full alpha support, universal browser support since 2020.
• PNG — fallback for older systems, tooling compatibility, and when maximum encoding speed matters.
• TIFF — for professional print and archival workflows where editor support trumps file size.

Image Formats and Their Compression Types

The formats worth knowing for web work: JPEG (lossy photos, legacy), PNG (lossless graphics), WebP (both modes, modern default), AVIF (both modes, best compression, slower encode).

For a deeper look at the WebP vs AVIF tradeoffs, see the WebP vs AVIF comparison. For the broader format decision, read Best Image Format for Web.

How to Choose the Right Compression for Your Images

Two questions narrow the decision quickly:

1. What type of image is it?

• Photograph or complex gradient → lossy (JPEG or lossy WebP/AVIF)
• Screenshot, logo, icon, UI element, text → lossless (PNG or lossless WebP)
• Unknown or mixed → test both; pick the smaller file that looks good at 100% zoom

2. Does it need to be re-edited?

• Source file / working asset → always lossless
• Final export for web delivery → lossy is usually fine for photos

Quick decision tree:

Is the image a photograph?
├── Yes → Is AVIF supported in your build pipeline?
│         ├── Yes → Lossy AVIF (quality 55-65)
│         └── No  → Lossy WebP (quality 75-82) or JPEG (quality 75-85)
└── No  → Does it have sharp text or UI elements?
          ├── Yes → Lossless WebP (or PNG as fallback)
          └── No  → Test lossy WebP quality 75; compare file size vs PNG
                    Pick whichever is smaller with acceptable quality

For format-specific guidance: How to Compress PNG Files and How to Compress JPEG Files walk through the quality settings and tradeoffs in detail.

If you want to skip the manual testing and compress images immediately, Pixotter's compression tool handles both lossy and lossless compression for JPEG, PNG, WebP, and AVIF — in-browser, no upload required. Also see the PNG vs WebP comparison for a format-level breakdown of when each wins.

FAQ

What is the main difference between lossy and lossless compression?

Lossy compression permanently discards image data to reduce file size — the original pixel values cannot be recovered. Lossless compression reduces file size without discarding data — decompressing a lossless file returns exactly the original pixels. The tradeoff: lossy produces much smaller files (especially for photos) but introduces artifacts; lossless preserves quality but saves less space.

Which is better for web performance: lossy or lossless?

For photographs, lossy compression is almost always better for web performance. A lossy WebP at quality 80 is typically 70-85% smaller than the equivalent PNG, with minimal perceptible quality difference. For graphics (logos, UI, screenshots), lossless is often smaller because there is no need to introduce artifacts, and lossless formats compress flat-color areas very efficiently.

Can I convert a lossy image back to lossless without losing quality?

No. You can save a JPEG as a PNG, but you are just wrapping lossy-compressed data in a lossless container. The artifacts from the original lossy encoding remain — they are now stored losslessly, which means the file is larger but no higher quality. Lossless formats preserve whatever data they receive; they cannot reconstruct data that was discarded.

Do WebP and AVIF use lossy or lossless compression?

Both support either mode. WebP lossy uses the VP8 codec (the same used in VP8 video). WebP lossless uses VP8L, a completely different codec optimized for lossless compression. AVIF uses AV1 for both modes. When you export a WebP or AVIF, you choose which mode to use — most image editors and CLI tools have a --lossless flag or similar option.

What quality setting should I use for lossy compression?

For JPEG: quality 75-85 covers most web photo use cases. Below 70, block artifacts become visible at normal viewing sizes. Above 90, file size increases substantially with diminishing quality returns.

For lossy WebP: quality 75-82 produces output visually comparable to JPEG 80-85 at 25-35% smaller file sizes.

For lossy AVIF: quality 55-65 typically matches JPEG 80-85 perceptually while being 40-50% smaller. AVIF's quality scale is not directly comparable to JPEG's — test at your target viewing size.

Why does compressing a screenshot as JPEG make it look worse AND sometimes larger?

JPEG's DCT-based compression struggles with sharp high-contrast edges — exactly what text and UI elements have. The compression creates "ringing" artifacts (fringing around edges) that require more bytes to encode than a smooth gradient would. Meanwhile, PNG's DEFLATE algorithm compresses large flat-color areas (common in screenshots) very efficiently. For a 1920×1080 screenshot with white backgrounds and black text, PNG will be smaller and sharper than JPEG at any quality setting above about 50.

Is PNG always lossless?

Yes. PNG only supports lossless compression. The compression level setting (0-9) controls DEFLATE effort — how hard the encoder works to find redundancy — but does not affect image quality. A PNG at compression level 0 and compression level 9 contain identical image data.

What is the best format for lossless web images in 2026?

Lossless WebP. It is universally supported in modern browsers, consistently 20-30% smaller than equivalent PNG files, and supports full alpha transparency. The only reasons to prefer PNG: tooling compatibility (some older software does not support WebP), maximum encoding speed (PNG encodes faster), or when you need color depths above 32-bit.