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.

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 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).

This is very nice. It’s 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!

Let’s 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 adore.

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

Let’s see an example!

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

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

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

Here is one more example!

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

Is this experiment biased? Definitely. I could have used some PNG compression techniques, go through ImageMagick’s 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’s lossy or lossless).

Thank you! ◼︎