Lossless and Alpha Gallery

This gallery presents some sample images to showcase two new modes of WebP: WebP-lossless and WebP-lossy with alpha (transparency support).

Side-by-Side Comparison

The table below presents PNG images (compressed with pngcrush and pngout), WebP-lossless images and WebP-lossy images with Alpha for side-by-side comparison. The images are overlaid onto a checkered background as typically done in graphics software.

Note that we have used webp quality 90 for WebP-lossy images with alpha and default quality for WebP-lossless images. See Reproducing the images section for more details.

We present the WebP images -- converted back to PNG -- for browsers not capable of rendering WebP. If you have a compatible browser, you can find the links to WebP files below. Also, the images on this page are scaled down for viewing convenience. Click on any image to view the full sized image.

The table also denotes the image size obtained in each mode.

PNG

WebP-lossless

WebP-lossy (with alpha)

"Yellow Rose" 1

PNG optimized file size: 110.7 KB
WebP-lossless Image
WebP-lossless file size: 79.9 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 17.7 KB
"baby tux for my user page" 2

PNG optimized file size: 38.1 KB
WebP-lossless Image
WebP-lossless file size: 27.0 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 13.8 KB
"PNG transparency demonstration" 3

PNG optimized file size: 213.5 KB
WebP-lossless Image
WebP-lossless file size: 149.0 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 51.6 KB
"Gregor Mendel's 189th Birthday" 4

PNG optimized file size: 49.2 KB
WebP-lossless Image
WebP-lossless file size: 33.2 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 18.3 KB
"Transparent compass card for overlays" 5

PNG optimized file size: 126.8 KB
WebP-lossless Image
WebP-lossless file size: 97.1 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 57.3 KB
"Yellow Rose": WebP-lossless file (80.1 KB) WebP-lossy (with alpha) file (18.4 KB)
"baby tux for my user page": WebP-lossless file (27.0 KB) WebP-lossy (with alpha) file (14.1 KB)
"PNG transperancy demonstration": WebP-lossless file (149.1 KB) WebP-lossy (with alpha) file (52.6 KB)
"Gregor Mendel's 189th Birthday": WebP-lossless file (33.3 KB) WebP-lossy (with alpha) file (19.0 KB)
"Transparent compass card for overlays": WebP-lossless file (97.1 KB) WebP-lossy (with alpha) file (57.3 KB)

Image Credits

The images on this page come from a number of different sources. Credits for the images above are listed here in order.

1 "Free Stock Photo in High Resolution - Yellow Rose 3 - Flowers"
Image Author: Jon Sullivan
This file is in the public domain.
JPEG source
2 "baby tux for my user page"
Image Author: Fizyplankton
This file is in the public domain.
PNG source
3 "PNG transparency demonstration"
Image Author: POV-Ray source code
Photo licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.
PNG source
4 "Gregor Mendel's 189th Birthday"
Image Author: Google Doodle team
Thanks to the Google Doodle team for this image.
PNG source
5 "Transparent compass card for overlays"
Image Author: Denelson83
This file is licenced under the Creative Commons Attribution-Share Alike 3.0 Unported license.
PNG source

Reproducing the Images

For the sake of reproducibility and to demonstrate the use of some WebP compression parameters, we describe here the exact steps involved when generating the images in this gallery.

Tools

For PNG recompression, the best result from pngcrush 1.8.13 and ZopfliPNG 1.0.3 is used. The following command line options are used

Pngcrush:

pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png

ZopfliPNG:

zopflipng --lossy_transparent input.png output-candidate.png

ZopfliPNG with all filters:

zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png

To rescale some of the larger source pictures (for viewing only), we used a recent version of ImageMagick's tool named convert, available at https://www.imagemagick.org. The exact command-line was as follows:

convert image.png -resize 240x image_resized.png

Compressing to WebP-lossless

We used the 'lossless' option in cwebp tool for converting PNG to WebP- lossless. To get the minimal output, the exact command-line used was as follows:

cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp

Rendering WebP-lossless

We converted WebP-lossless images back to PNG using dwebp tool for rendering. The exact command-line used was as follows:

dwebp webp_lossless.webp -o output.png

Compressing to WebP-lossy (with alpha)

We used cwebp tool for converting PNG to WebP-lossy (with alpha). We selected WebP quality of 90 (lossy compression) and alpha quality of 100 (lossless compression). The exact command-line used was as follows:

cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp

Rendering WebP-lossy (with alpha)

We converted WebP-lossy (with alpha) images back to PNG using dwebp tool for rendering. The exact command-line used was as follows:

dwebp webp_alpha.webp -o output.png