WebP

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 file size: 118.5 KB
WebP-lossless Image
WebP-lossless file size: 90.1 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 22.9 KB
"baby tux for my user page" 2

PNG file size: 40.5 KB
WebP-lossless Image
WebP-lossless file size: 28.7 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 16.7 KB
"PNG transparency demonstration" 3

PNG file size: 215.8 KB
WebP-lossless Image
WebP-lossless file size: 152.4 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 71.3 KB
"Gregor Mendel's 189th Birthday" 4

PNG file size: 63.3 KB
WebP-lossless Image
WebP-lossless file size: 49.5 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 23.5 KB
"Transparent compass card for overlays" 5

PNG file size: 127.1 KB
WebP-lossless Image
WebP-lossless file size: 101.7 KB
WebP-lossy (with alpha) Image
WebP-lossy (with alpha) file size: 68.3 KB
"Yellow Rose": WebP-lossless file (90.1 KB) WebP-lossy (with alpha) file (22.9 KB)
"baby tux for my user page": WebP-lossless file (28.7 KB) WebP-lossy (with alpha) file (16.7 KB)
"PNG transperancy demonstration": WebP-lossless file (152.4 KB) WebP-lossy (with alpha) file (71.3 KB)
"Gregor Mendel's 189th Birthday": WebP-lossless file (49.5 KB) WebP-lossy (with alpha) file (23.5 KB)
"Transparent compass card for overlays": WebP-lossless file (101.7 KB) WebP-lossy (with alpha) file (68.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.
PNG 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

To rescale some of the larger source pictures (for viewing only), we used a recent version of ImageMagick's tool named convert, available at http://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. The exact command-line used was as follows:

cwebp input.png -lossless -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 -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

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.