Title: WebP and WebP v2 Slug: webp-and-webp-v2 Date: 2021-02-13 17:20:00 Author: Kartones Lang: en Tags: Development, Tools, HTML, Graphics og_image: Description: Using of WebP for image compression on websites, noting its recent support by Safari and the upcoming WebP v2, which promises further improvements. [WebP](https://developers.google.com/speed/webp/) has been around for a few years, but wasn't until recently that Safari [added support for it](https://9to5mac.com/2020/06/24/apple-adds-webp-hdr-support-and-more-to-safari-with-ios-14-and-macos-big-sur/), 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](https://github.com/kartones-forks/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](https://github.com/Kartones/python/blob/master/pelican/plugins/defer_loading_images/defer_loading_images.py#L117) so it uses `` 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](https://gist.github.com/Kartones/457fda60da05bb55224d#webp), 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](https://chromium.googlesource.com/codecs/libwebp2/) is already under construction, and that it explores some ideas from [AVIF](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/) [1]. It got me interested, read about it, and watched [this interesting talk](https://www.youtube.com/watch?v=zogxpP2lm-o) 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](https://codepen.io/skal65535/project/full/ZwnQWM), which reminded me of [a former colleage's post](https://www.freecodecamp.org/news/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c/) 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.