# Lossless and Alpha Gallery ## 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](https://developers.google.com/speed/webp/gallery2#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](https://developers.google.com/speed/webp/gallery2#webp_links). 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^](https://developers.google.com/speed/webp/gallery2#credits1) ||| | [![](https://www.gstatic.com/webp/gallery3/1.sm.png)](https://www.gstatic.com/webp/gallery3/1.png) PNG optimized file size: 110.7 KB | [![WebP-lossless Image](https://www.gstatic.com/webp/gallery3/1_webp_ll.sm.png)](https://www.gstatic.com/webp/gallery3/1_webp_ll.png) WebP-lossless file size: 79.9 KB | [![WebP-lossy (with alpha) Image](https://www.gstatic.com/webp/gallery3/1_webp_a.sm.png)](https://www.gstatic.com/webp/gallery3/1_webp_a.png) WebP-lossy (with alpha) file size: 17.7 KB | | ||| | "baby tux for my user page" [^2^](https://developers.google.com/speed/webp/gallery2#credits2) ||| | [![](https://www.gstatic.com/webp/gallery3/2.sm.png)](https://www.gstatic.com/webp/gallery3/2.png) PNG optimized file size: 38.1 KB | [![WebP-lossless Image](https://www.gstatic.com/webp/gallery3/2_webp_ll.sm.png)](https://www.gstatic.com/webp/gallery3/2_webp_ll.png) WebP-lossless file size: 27.0 KB | [![WebP-lossy (with alpha) Image](https://www.gstatic.com/webp/gallery3/2_webp_a.sm.png)](https://www.gstatic.com/webp/gallery3/2_webp_a.png) WebP-lossy (with alpha) file size: 13.8 KB | | ||| | "PNG transparency demonstration" [^3^](https://developers.google.com/speed/webp/gallery2#credits3) ||| | [![](https://www.gstatic.com/webp/gallery3/3.sm.png)](https://www.gstatic.com/webp/gallery3/3.png) PNG optimized file size: 213.5 KB | [![WebP-lossless Image](https://www.gstatic.com/webp/gallery3/3_webp_ll.sm.png)](https://www.gstatic.com/webp/gallery3/3_webp_ll.png) WebP-lossless file size: 149.0 KB | [![WebP-lossy (with alpha) Image](https://www.gstatic.com/webp/gallery3/3_webp_a.sm.png)](https://www.gstatic.com/webp/gallery3/3_webp_a.png) WebP-lossy (with alpha) file size: 51.6 KB | | ||| | "Gregor Mendel's 189th Birthday" [^4^](https://developers.google.com/speed/webp/gallery2#credits4) ||| | [![](https://www.gstatic.com/webp/gallery3/4.sm.png)](https://www.gstatic.com/webp/gallery3/4.png) PNG optimized file size: 49.2 KB | [![WebP-lossless Image](https://www.gstatic.com/webp/gallery3/4_webp_ll.sm.png)](https://www.gstatic.com/webp/gallery3/4_webp_ll.png) WebP-lossless file size: 33.2 KB | [![WebP-lossy (with alpha) Image](https://www.gstatic.com/webp/gallery3/4_webp_a.sm.png)](https://www.gstatic.com/webp/gallery3/4_webp_a.png) WebP-lossy (with alpha) file size: 18.3 KB | | ||| | "Transparent compass card for overlays" [^5^](https://developers.google.com/speed/webp/gallery2#credits5) ||| | [![](https://www.gstatic.com/webp/gallery3/5.sm.png)](https://www.gstatic.com/webp/gallery3/5.png) PNG optimized file size: 126.8 KB | [![WebP-lossless Image](https://www.gstatic.com/webp/gallery3/5_webp_ll.sm.png)](https://www.gstatic.com/webp/gallery3/5_webp_ll.png) WebP-lossless file size: 97.1 KB | [![WebP-lossy (with alpha) Image](https://www.gstatic.com/webp/gallery3/5_webp_a.sm.png)](https://www.gstatic.com/webp/gallery3/5_webp_a.png) 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](https://www.gstatic.com/webp/gallery3/1_webp_ll.webp) (80.1 KB) | [WebP-lossy (with alpha) file](https://www.gstatic.com/webp/gallery3/1_webp_a.webp) (18.4 KB) | | "baby tux for my user page": | [WebP-lossless file](https://www.gstatic.com/webp/gallery3/2_webp_ll.webp) (27.0 KB) | [WebP-lossy (with alpha) file](https://www.gstatic.com/webp/gallery3/2_webp_a.webp) (14.1 KB) | | "PNG transperancy demonstration": | [WebP-lossless file](https://www.gstatic.com/webp/gallery3/3_webp_ll.webp) (149.1 KB) | [WebP-lossy (with alpha) file](https://www.gstatic.com/webp/gallery3/3_webp_a.webp) (52.6 KB) | | "Gregor Mendel's 189th Birthday": | [WebP-lossless file](https://www.gstatic.com/webp/gallery3/4_webp_ll.webp) (33.3 KB) | [WebP-lossy (with alpha) file](https://www.gstatic.com/webp/gallery3/4_webp_a.webp) (19.0 KB) | | "Transparent compass card for overlays": | [WebP-lossless file](https://www.gstatic.com/webp/gallery3/5_webp_ll.webp) (97.1 KB) | [WebP-lossy (with alpha) file](https://www.gstatic.com/webp/gallery3/5_webp_a.webp) (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](https://web.archive.org/web/20190909072451/http://www.public-domain-photos.com/free-stock-photos-4/flowers/yellow-rose-3.jpg) | | 2 | "baby tux for my user page" Image Author: Fizyplankton This file is in the public domain. [PNG source](https://web.archive.org/web/20111213095701/http://www.minecraftwiki.net/images/8/85/Fizyplankton.png) | | 3 | "PNG transparency demonstration" Image Author: POV-Ray source code Photo licensed under the [Creative Commons](https://en.wikipedia.org/wiki/en:Creative_Commons) [Attribution-Share Alike 3.0 Unported](https://creativecommons.org/licenses/by-sa/3.0/deed.en) license. [PNG source](https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png) | | 4 | "Gregor Mendel's 189th Birthday" Image Author: Google Doodle team Thanks to the Google Doodle team for this image. [PNG source](https://www.gstatic.com/webp/gallery3/4.png) | | 5 | "Transparent compass card for overlays" Image Author: Denelson83 This file is licenced under the [Creative Commons](https://en.wikipedia.org/wiki/en:Creative_Commons) [Attribution-Share Alike 3.0 Unported](https://creativecommons.org/licenses/by-sa/3.0/deed.en) license. [PNG source](https://upload.wikimedia.org/wikipedia/commons/d/d3/Compass_Card_transparent.png) | ## 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 . 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