WebP and WebP v2

WebP has been around for a few years, but wasn't until recently that Safari added support for it, closing the circle of being available at all major browsers.

I've always tried to squeeze out loading speed from my sites, as I use a cheap server to host my site but want it to be served and ready as quickly as possible. I've tried tools like guetzli to better compress JPEGs, but it is so slow that often I just didn't ran it if the image was already small, as the gains are negligible.

So with the aforementioned WebP support almost everywhere, I decided to update my small Pelican image plugin so it uses <picture> markup to serve WebP for modern browsers, and still rely on the old JPEG/PNG original images for oldies.

Compressing all the images I got really nice results with a pretty standard configuration, between 25% and 35% size shrink with no apparent visual quality loss, sometimes going up to 50% reduction (mostly with PNGs).

Chatting about it at Twitter, I was told that WebP v2 is already under construction, and that it explores some ideas from AVIF [1]. It got me interested, read about it, and watched this interesting talk by a Google engineer working on the new version, which shows not only how it works but also some cool tooling to test the different parameters that affect the compression.

You can also see other nice details, such as how the WebP2 triangle preview works in this Codepen, which reminded me of a former colleage's post about precisely doing that same idea using SVG instead: building a thumbnail using triangles so they weight very little. I recommend checking both the experiment and reading JM Perez's post.

[1] I thought about also adding AVIF to the blog, but the support is yet very limited, so I'll wait a bit more. And if in the meanwhile WebP2 comes out, probably go for that one instead.