WebP – an image format for the Web

In a recent update of one of my blogs, to use the latest version of WordPress (5.8), the release notes mentioned that WordPress now supports WebP Images

WebP is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth.

This image format has languished in the shadows since being announced by Google in September 2010 !!

WebP Announcement (Google Code Blog)

(and in case the Google Code Blog article disappears)

As with many announcements from tech companies, it’s not always worth expending any effort unless the technology has been around for awhile. Is now the time ?

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

WebP – A new image format for the Web

WebP is natively supported in Google Chrome, Firefox, Edge, the Opera browser, and many other tools and software libraries. Developers have also added support to a variety of image editing tools.

Command line tools are available for Windows, MacOS and LInux to convert to and from the WebP format.

WebP Precompiled Utilities

(A copy of the version I used is available at libwebp-1.2.1-rc2-windows-x64.zip (3.43Mb))

cwebp encodes images in either JPEG, PNG or TIFF format into WebP, while dwebp decodes them back into PNG.

C:\>cwebp -help

Usage:

   cwebp [options] -q quality input.png -o output.webp

where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.

Try -longhelp for an exhaustive list of advanced options.

Here’s an example converting a JPG image to WebP

C:\> cwebp AberystwythHarbour.jpg -o harbourjpeg.webp

Saving file 'harbourjpeg.webp'
File:      AberystwythHarbour.jpg
Dimension: 7037 x 2240
Output:    1071514 bytes Y-U-V-All-PSNR 39.52 45.93 46.29   40.83 dB
           (0.54 bpp)
block count:  intra4:      38374  (62.30%)
              intra16:     23226  (37.70%)
              skipped:      2543  (4.13%)
bytes used:  header:            380  (0.0%)
             mode-partition: 172642  (16.1%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       2%|      15%|      25%|      58%|   61600
      quantizer:  |      36 |      35 |      30 |      21 |
   filter level:  |      11 |       8 |      26 |      23 |

and from a PNG image to WebP


> cwebp AberystwythHarbour.png -o harbourpng.webp

Saving file 'harbourpng.webp'
File:      AberystwythHarbour.png
Dimension: 7037 x 2240
Output:    1048284 bytes Y-U-V-All-PSNR 39.40 45.91 46.25   40.72 dB
           (0.53 bpp)
block count:  intra4:      38404  (62.34%)
              intra16:     23196  (37.66%)
              skipped:      3117  (5.06%)
bytes used:  header:            364  (0.0%)
             mode-partition: 172381  (16.4%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       3%|      16%|      24%|      58%|   61600
      quantizer:  |      36 |      35 |      30 |      21 |
   filter level:  |      11 |       8 |      13 |      28 |

The resulting file sizes are

C:\> dir 

03/08/2021  13:50         3,716,172 AberystwythHarbour.jpg
03/08/2021  13:49        22,568,595 AberystwythHarbour.png
03/08/2021  13:55         1,071,514 harbourjpeg.webp
03/08/2021  13:56         1,048,284 harbourpng.webp

The test image is a panoramic created from a number of images stitched together using the excellent Image Composite Editor (ICE) from Microsoft Research.

Microsoft Image Composite Editor

For this particular image, the JPG file has been reduced in size by 71.17% and the PNG version by 95.36% and suffers from no noticeable degradation in quality (at leas as far as I can tell). The original images are 7037 x 2240 pixels and the images on this page are auto-scaled down by WordPress

JPG Image

Original JPG image (3.55Mb)

WEBP from JPG

Original WEBP image from JPG file (1.02Mb)

PNG Image

Original PNG image (21.5Mb)

WEBP from PNG

Original WEBP image generated from PNG file (1.0Mb)