Preface #
In my previous post, I introduced the AVIF format and how to use it. I thought it was a format with great potential: high compression ratio and excellent image quality. But after actually replacing my blog images with AVIF, I ran into quite a few compatibility issues and ultimately decided to switch back to WebP.
This article explains why I went back to WebP.
Compatibility Issues #
First, let’s look at AVIF’s compatibility data on Can I use.
As you can see, Edge only started supporting AVIF from version 121, which was released in 2024. Even though half a year has passed since this article was written, there are still many people who haven’t updated to the latest browser version. Mobile is even more problematic. Most mobile browsers only recently added support. For example, QQ Browser. If someone opens your blog in QQ or WeChat, images might not display at all. Even though my blog doesn’t have many images, this still significantly affects the reading experience.
Then there’s hardware decoding support for AV1. You can check CPU and SoC support on Wikipedia. Here are some common ones:
Desktop #
Intel #
- 11th gen and later: Starting from the 11th gen Tiger Lake processors, Intel integrated AV1 hardware decoding support.
AMD #
- Ryzen 6000 series and later: Based on Zen 3+ architecture, supports AV1 hardware decoding.
Apple Silicon #
- M3 and later: M3, M3 Pro, M3 Max started supporting AV1 hardware decoding1.
Mobile #
Qualcomm #
- AV1 hardware decoding supported starting from Snapdragon 888.
iOS #
- AV1 hardware decoding supported starting from A17 Pro2.
Rant #
Apple sure knows how to milk it. They only added AV1 hardware decoding support in chips released in late 2023. While software decoding can fill the gap, it requires the OS or browser to be updated first. On devices without hardware decoding support, software decoding causes high CPU usage, device heating, and on older, less powerful devices, it can lead to stuttering.
WebP Introduction #
WebP3 is an image format developed by Google, designed to speed up image loading. Its main advantage is smaller file sizes. At the same quality level, WebP images are about 40% smaller than JPEG, roughly two-thirds the size, which can save significant server bandwidth and storage space.
Check WebP’s support on Can I use as well.
Compared to AVIF, WebP has much broader support. With the exception of IE (which Microsoft has already abandoned, and nobody should be using anymore), all mainstream browsers support it. WebP has been around for years, has a mature ecosystem, and you basically don’t have to worry about compatibility issues.
How to Convert Images to WebP Format #
You can use FFmpeg4 for conversion:
# JPEG → WebP
ffmpeg -i input.jpg output.webp
# PNG → WebP
ffmpeg -i input.png output.webpAdjust output quality with the -qscale parameter (0-100, higher values mean better quality but larger files):
ffmpeg -i input.jpg -qscale 75 output.webpAdjust compression level with the -compression_level parameter (0-6, higher values mean higher compression but slower speed):
ffmpeg -i input.jpg -compression_level 4 output.webpCombined usage, specifying both quality and compression level:
ffmpeg -i example.png -qscale 80 -compression_level 4 example.webp