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 !!
(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 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.
(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.
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
WEBP from JPG
WEBP from PNG