Contents of this Gallery
This gallery page is best viewed with a browser that supports WebP, such as Google Chrome, Opera and others.
If you don't have access to Google Chrome, you may download the images on your local drive to use with other products that support WebP.
Sample Image Files in JPEG and WebP and the PNG Source
The table below shows scaled JPEG (on the left) and WebP images (on the right) side-by-side for comparison. Since browsers exist that support WebP natively, we no longer place WebP images in a PNG container as we did at launch. Image file sizes are exact. Clicking on the JPEG and WebP thumbnails will open the large images in a new tab
File sizes below the thumbnails correspond to the files sizes of the images viewed when clicking the thumbnails. The WebP images are more than 30% smaller than the JPEG ones.
JPEG | WEBP |
---|---|
"Nærøyfjorden, Norway - from Breiskrednosi. UNESCO World Heritage" 1 | |
JPEG file size: 43.84 KB |
WebP file size: 29.61 KB |
"Kayaker at Ekstremsportveko 2010, Voss". 2 | |
JPEG file size: 86.25 KB |
WebP file size: 59.18 KB |
Frame 10 of the "Parkrun" sequence 3 | |
JPEG file size: 297.05 KB |
WebP file size: 198.38 KB |
Image: "A Wild Cherry (Prunus avium) in flower" 4 | |
JPEG file size: 251.03 KB |
WebP file size: 172.82 KB |
Image: Fire breathing "Jaipur Maharaja Brass Band" Chassepierre Belgium 5 | |
JPEG file size: 120.78 KB |
WebP file size: 80.76 KB |
Image Credits
The images on this page come from a number of different sources. We have selected some delightful and rich pictures to showcase qualities of WebP.
Credits for the images above are listed here in order.
1 |
"Nærøyfjorden, Norway - from Breiskrednosi. UNESCO World Heritage" Image Author: Kjetil Birkeland Moe Reproduced with permission of the author. PNG source Blog post by author with comparison of JPEG and WebP. Mouse hover activates examples. |
2 |
"Kayaker at Ekstremsportveko 2010, Voss" Image Author: Kjetil Birkeland Moe Reproduced with permission of the author. PNG source Blog post by author with comparison of JPEG and WebP. Mouse hover activates examples. |
3 |
Frame 10 of the "Parkrun" sequence Image Producer: Lars Haglund, SVT Sveriges Television AB Reproduced with permission of producer PNG source |
4 |
Image: "A Wild Cherry (Prunus avium) in flower" Image Author: Benjamin Gimmel PNG source Photo licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license. |
5 |
Image: Fire breathing "Jaipur Maharaja Brass Band" Chassepierre Belgium Author: Luc Viatour PNG source Photo licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license. Author website at www.lucnix.be |
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 convert and rescale the source pictures, we used a recent version of
ImageMagick's tool named convert
, available at https://www.imagemagick.org.
The version information reads:
Version: ImageMagick 6.5.7-8 2010-12-02 Q16 https://www.imagemagick.org
For JPEG compression, we used the version 8b of IJG's reference encoder, available at https://www.ijg.org/files/jpegsrc.v8b.tar.gz.
The version information reads:
Independent JPEG Group's CJPEG, version 8b 16-May-2010
Copyright (C) 2010, Thomas G. Lane, Guido Vollbeding
Generating the Source PNG Pictures
First, the JPEG sources are converted losslessly to PNG format simply using:
convert in.jpg out.png
Then, the large source images are rescaled to a smaller width of 1024 pixels using the following command:
convert in.png -depth 16 -gamma 0.454545 -filter lanczos -resize 1024 -gamma 2.2 -depth 8 out.png
to produce the final set of source PNG images.
Compressing to JPEG Format
JPEG's encoder (cjpeg
) takes input images in PPM format. We use convert
to
generate them. The complete conversion sequence is then:
convert in.png tmp.ppm
cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm
which produces optimized JPEG files with a quality factor of 80.
Compressing to WebP Format
We targeted a 30% file size reduction compared to the optimized JPEG files.
Thus, we explicitly specified the target sizes for each picture.
Additionally, we set ad-hoc values for the filtering strength for each
picture, thanks to the -f
option of the cwebp
tool. The amplitude of the
spatial noise shaping is also reinforced for some pictures by use of the
-sns
option. The exact command lines used read:
cwebp -m 6 -f 50 -size 31500 1.png -o 1.webp
cwebp -m 6 -f 20 -sns 100 -size 62000 2.png -o 2.webp
cwebp -m 6 -sns 90 -size 213000 3.png -o 3.webp
cwebp -m 6 -f 40 -size 181000 4.png -o 4.webp
cwebp -m 6 -f 40 -size 89000 5.png -o 5.webp
Overall, the resulting WebP files provided a global saving of 32% compared to the JPEG file sizes.
Note that the WebP thumbnails used on this page are also smaller by 26% compared to their JPEG equivalent.