FluffyBench

Should you save an image as lossy or lossless WebP?

For a screenshot or flat graphic, lossless WebP can be the smaller choice. Here's how to choose a mode without giving up detail you care about.

FluffyBench · 7 min read · Measured with FluffyBench's WebP converter

What do lossy and lossless WebP keep?

WebP is an image format with two ways to save your picture. Lossless is like writing a shopping list in shorthand: 'four apples' takes less writing than listing each apple, and you can still unpack the exact list. It looks for patterns it can describe compactly. Lossy can change small details to make the description shorter.

Imagine a row of colors with one small detail. Lossless shorthand restores that detail; a lossy description can simplify it.

Three pixel strips: the original includes an orange square among teal squares; lossless restores the same strip; schematic lossy output has teal throughout.
A schematic of the two ideas, not a measured conversion. How we reviewed

So lossless describes what the image keeps. It doesn't promise a bigger file, and lossy doesn't promise a smaller one. The picture's patterns help decide which mode packs it better.

Why can lossless WebP make flat graphics smaller?

These three generated pictures put fine grain, repeated colors and see-through shapes side by side.

A centered crop of a synthetic noisy JPEG, with fine grain visible across the image.

Grainy photo

A flat interface screenshot sample made from rectangles and bars.

Interface screenshot

A transparent graphic sample of overlapping circles and a bar, shown over a checkerboard.

Transparent graphic

  1. Fine grain

    Independent specks cover the photo, so there are few repeated patches to pack.

  2. Broad color blocks

    Large areas reuse the same colors, giving lossless a pattern it can describe compactly.

  3. See-through edges

    The checkerboard shows where the artwork lets the background show through.

Compare the repeated color areas with the photo's fine grain.

In our recorded conversions, lossless made the flat screenshot and transparent graphic smaller than lossy did. For the grainy JPG, both WebP copies were bigger than the original.

Grainy photo

Original JPG
4.9 MB
Lossy, Quality 92
5.4 MB
Lossless
10.6 MB

Interface screenshot

Original PNG
2.7 KB
Lossy, Quality 92
2.0 KB
Lossless
188 B

Transparent graphic

Original PNG
3.0 KB
Lossy, Quality 92
5.8 KB
Lossless
988 B
Original versus both WebP modes, with lossy at Quality 92 and dimensions unchanged; each card has its own scale.

The picture matters more than a rule like 'photos use lossy, graphics use lossless.'

What should you look for in a WebP copy?

At this screenshot corner, the three copies look alike, and lossless takes about a tenth of the lossy file's space. Crisp boundaries can cost less to keep than to simplify.

Generated interface screenshot with a rectangle boundary marked for comparison.

Original PNG

A sharp boundary between the original interface colors.

2.7 KB

Lossy · Quality 92

The same interface boundary in the lossy WebP.

2.0 KB

Lossless

The same interface boundary in the lossless WebP.

188 B

Rendered for illustration.

Compare the corner and surrounding colors; sizes are for the complete files, with dimensions unchanged.

Lossy makes this grain-photo preview smaller than lossless does. Compare the specks to decide whether its detail is right for your use.

Retained grain-photo PNG preview with a textured patch marked for comparison.

Original preview PNG

Grain in the retained PNG preview.

172.7 KB

Lossy · Quality 92

The same grain in the lossy preview copy.

30.3 KB

Lossless

The same grain in the lossless preview copy.

79.8 KB

Rendered for illustration.

Matched crops of the retained PNG preview; these file sizes belong to the preview copies, separate from the full-size JPG in the chart.

How to choose between lossy and lossless WebP

Start with what your picture needs to keep. For flat artwork, lossless is worth including even when a small delivery file is your goal.

Two branches: preserving detail and color values leads to lossless; trading some detail for delivery size leads to lossy. Both lead to comparing file size and appearance with the original.
Choose a starting mode, then let the actual copy decide.

If neither WebP improves the tradeoff you need, the original can be the right file to use. Your destination also needs to accept WebP.

Doing it in FluffyBench: make both WebP copies

Use FluffyBench's WebP converter to compare the modes on your own image. The walkthrough uses the same generated screenshot as the crop comparison.

Set up the first copy with Lossy compression and unchanged dimensions.

  1. WebP converter intake with Choose images.
    WebP converter intake with Choose images.
    Step 1. Keep your original. Choose images, then open Settings.
    1. Choose images opens your file picker.
    2. After choosing your image, open Settings.
  2. Compression set to Lossy and Quality at 92.
    Compression set to Lossy and Quality at 92.
    Step 2. Lossy can change detail. Quality sets how much detail it tries to keep; use 92 for this comparison.
    1. Choose Lossy under Compression.
    2. Set Quality to 92.
  3. Size set to Original, with the Settings button above the controls.
    Size set to Original, with the Settings button above the controls.
    Step 3. Original keeps the pixel dimensions unchanged.
    1. Leave Size on Original.
  4. Settings button used to close the open settings panel.
    Settings button used to close the open settings panel.
    Step 4. Close Settings before converting.
    1. Press Settings again to close the panel.
  5. Convert 1 to WebP is ready.
    Convert 1 to WebP is ready.
    Step 5. Create the lossy WebP.
    1. Press Convert 1 to WebP.

Save the first result before changing Compression. Both conversions start from your uploaded original.

  1. Completed lossy WebP with original and output size lines.
    Completed lossy WebP with original and output size lines.
    Step 1. Check the saved WebP size against the original.
    1. The first line is the original size.
    2. The second line is the saved WebP size.
  2. Download button for the completed lossy WebP.
    Download button for the completed lossy WebP.
    Step 2. Save the lossy copy before changing modes. Give it a name you can recognize in your downloads.
    1. Download saves the completed WebP.
  3. Lossless selected with Original size; Quality and the file-size limit are absent.
    Lossless selected with Original size; Quality and the file-size limit are absent.
    Step 3. Reopen Settings and choose Lossless. Quality disappears; the file-size search is unavailable. The bigger-files hint is not a rule: the flat screenshot got smaller.
    1. Choose Lossless under Compression.
    2. Original is still selected.
  4. Settings button above the lossless controls.
    Settings button above the lossless controls.
    Step 4. Close Settings to return to the conversion button.
    1. Press Settings to close the panel.
  5. Reconvert 1 to WebP ready after the compression change.
    Reconvert 1 to WebP ready after the compression change.
    Step 5. Make the lossless copy from the same original.
    1. Press Reconvert 1 to WebP.

Want to compare WebP modes on another image?

Can see-through areas change slightly in lossless WebP?

In our transparent graphic, colors across the partly see-through shapes shifted by up to 2 levels after opening, saving and reopening as lossless WebP. Solid and fully clear pixels matched.

Magenta fills the changed positions across the partly transparent circle and bar, over a dimmed graphic.

Difference map: highlighted positions

  1. See-through circle

    Magenta covers the circle's interior as well as its edge.

  2. See-through bar

    The bar's partly transparent area changed too; the map highlights positions, not the size of each change.

  3. Solid disc

    The solid disc matched and has no magenta highlight.

The magenta areas locate changes that are hard to see in the saved picture.

The actual enlarged patch looks much the same on both sides. If exact partly transparent color values matter to your job, appearance alone isn't enough to check them.

Enlarged patch: original PNG on the left, reopened lossless WebP on the right.

Original PNG (left), reopened WebP (right)

The color shift is subtle in this source-and-copy view.

Our guide to image transparency explains how partly see-through colors mix with a background.

Search FluffyBench