Contents of this 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 file size: 79.9 KB |
 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 file size: 27.0 KB |
 WebP-lossy (with alpha) file size: 13.8 KB |
| "PNG transparency demonstration" 3 | ||
 PNG optimized file size: 213.5 KB |
 WebP-lossless file size: 149.0 KB |
 WebP-lossy (with alpha) file size: 51.6 KB |
| "Gregor Mendel's 189th Birthday" 4 | ||
 PNG optimized file size: 49.2 KB |
 WebP-lossless file size: 33.2 KB |
 WebP-lossy (with alpha) file size: 18.3 KB |
| "Transparent compass card for overlays" 5 | ||
 PNG optimized file size: 126.8 KB |
 WebP-lossless file size: 97.1 KB |
 WebP-lossy (with alpha) file size: 57.3 KB |
Here are the links to the WebP files (viewable in Chrome 22 and above):
| "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