93; 12022 H.E.

Update: hi, this page got a little traction on HackerNews. I want to note that there are formats that are meant to supersede WebP, such as AVIF and JPEG XL, however, AVIF (69.25%) and JPEG XL (0%) are not as nearly adopted as WebP is (91.38%). Usage taken on April 13th, 2022. Also, get a browser released after 2013.

Motivation

I have been toying around with WebP for a couple of weeks now. Convert this image into webp and try to use it instead of traditional png. It was pretty crazy for me to see an up to 10x image size reduction, yet very little to no visual difference with a naked human eye.

Some further reading led me to some pleasant discoveries, such as lossy and lossless compression, transparency with an alpha channel, metadata, animation (!) support, and a wide adoption by major browsers and graphics software over the past decade or so.

This is truly some state-of-the-art stuff. Even as claiming an average of 45% reduction in file size with wild PNGs found on the web and a 28% reduction compared to PNGs that are recompressed with pngcrush and PNGOUT. [I] I should try this now!

The migration

The process of moving from PNG to WebP was painless. I rigged a quick find and sed script to go through all my directories and convert images with ImageMagick. Another quick regex to find corresponding file links and references in org files, and replace them with anew webp format. It all took no more than 15 to 20 minutes. I talked to Darkness to support variable preview files aaaannd push!

Wow, it just works. Even GitHub Pages deploys it in about halftime now. Let me see if we got any file size gains. I’ll archive the whole website into two tar files: before and after webp changes (.git of course excluded).

sandyuraz:source* λ ls -lh *.tar
-rw-r--r--  1 thecsw  staff   279M Apr  3 15:33 png.tar
-rw-r--r--  1 thecsw  staff   108M Apr  3 15:33 webp.tar

This is very nice. It’ less than half of what it was before! Going through some of the pages, even my eye can’t spot any differences that would be noticeable. WebP is good for all the stuff on the web. Choose your image formats based on your needs and requirements. For now, WebP looks like a great alternative. Thank you!

Example?

Let’ try to grab a picture in PNG format, convert it to WebP and see how the file size and image quality differ between those two. I’ll have both examples from an amazing photographer @shnimohus, whose shots I absolutely adore.

Below is the ImageMagick version I will be using when simply running convert source.png target.webp

Version: ImageMagick 7.1.0-29 Q16-HDRI x86_64 19841 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP(5.0)
Delegates (built-in): bzlib fontconfig freetype gslib heic jng jp2 jpeg lcms lqr ltdl lzma openexr png ps tiff webp xml zlib
Compiler: gcc (4.2)

Let’ see an example!

Here is a shot of a bus stop in PNG, weighing at around 2.4MB


This is the PNG version
This is the PNG version

As a comparison, here is the WebP generated from it, which is only about 258KB


This is the WebP version
This is the WebP version

For the sake of the experiment, try to dowload both files and see if you can spot any differences.

Here is one more example!


This PNG is around 3.9MB
This PNG is around 3.9MB

With its counterpart generated with convert town.png town.webp


This WebP is only around 462KB
This WebP is only around 462KB

Is this experiment biased? Definitely. I could have used some PNG compression techniques, go through ImageMagick’ documentation to fine-tune the conversion. However, the big point here is that without doing any of that, WebP seems to keep the quality I prefer while also reducing the size (doesn’t matter to me whether it’ lossy or lossless).

Thank you! ◼︎


I Lossless and transparency encoding in WebP