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.
The process of moving from PNG to WebP was painless. I rigged a quick
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’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 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’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! ◼︎