Not sure about the difference between AVIF and WebP image formats? 🖼️
For years upon years, PNG and JPEG were the go-to image file formats for WordPress (and websites in general). They still dominate the web, but in recents times a growing number of next-gen formats have been steadily eating away at their market share. Among them are AVIF and WebP. Both offer a lot of benefits, but if you only recently found out about them, you might not know if they’re a good choice for you.
In this post, we’ll take a closer look at their compression ability, image quality, and browser support. Then, we’ll guide you through setting up an auto-pilot method for using each one in WordPress.
An introduction to AVIF vs WebP
WebP and AVIF are next-gen formats that aim to produce smaller file sizes while maintaining a high-quality image. Google introduced us to WebP in 2010, whereas AVIF is a bit newer. It was established in 2019.
WebP was initially launched as a replacement for the traditional image formats JPEG, JPG, and PNG.
It makes a strong use case for true-color, photographic images, since it’s able to display a higher number of pixels. Plus, it delivers super fast loading times, as WebP files are 26% smaller than PNG files and up to 34% smaller than JPEG files [1].
On the other hand, AVIF, derived from the AVI video codec, is a great choice for lossy compression. Lossy compression is when unnecessary data is removed from the file, usually without a noticeable drop in quality.
Additionally, AVIF can help you cut down on bandwidth costs, since the file sizes are very small:
What’s more, AVIF is pretty flexible. For instance, while both of these file formats have strict resolution limits, AVIF allows you to exceed this limit by rendering independently encoded tiles. On top of this, AVIF is a top choice for videos, animations, and images with transparent backgrounds.
AVIF vs WebP: Three key factors to consider
To gain a deeper understanding of AVIF and WebP, you should be familiar with their key differences. This way, you can choose the best format for your website and your needs. With that in mind, let’s examine three important factors:
1. Compression ability 🗜️
Image compression is one of the most important considerations when choosing between AVIF and WebP. With a small file size, you can increase your loading times and reduce Large Contentful Paint (LCP). In turn, this provides a better user experience (UX) for your visitors and can potentially improve your ranking in the SERP.
Take a look at the side-by-side images below:
The original JPG of the image above was taken by me, using my Samsung phone. I then put it through the Squoosh app and converted it to an AVIF file, and did it again (using the original source image) to convert it to a WebP. The Squoosh app lets you fine tune the compression settings, but I just left them on whatever the default was and downloaded the files.
I then took screenshots of each thumbnail so that you could see that they are all the same size, and I also opened up the file details and screenshotted those, too. Finally, I put all of them together and took one last screenshot, which is what you see above. I’ll explain why I did it this way later – when we discuss browser and platform support.
Unfortunately, this approach also creates a limitation in how you’re seeing the images. You’re not seeing the true JPG, AVIF, and WebP as I saw them, but instead you’re viewing a PNG of those original file types. With that said, since I’m the one who took the screenshot and did have the benefit of viewing the files, I can attest to the fact that what you see above is an accurate representation of their quality and appearance. There wasn’t any noticeable difference in the three photos, but as you can tell by their file sizes, the AVIF is the clear winner (295 KB), followed by the WebP (417 KB), and finally the JPG (564 KB).
Long story short, both AVIF and WebP can render smooth, sharp images in a smaller package compared to their JPG counterparts. It’s rare to witness negative effects and most of the time the quality is retained if converting from a JPG. Overall, in terms of pure compression, AVIF is the superior choice for very precise images like graphics. Additionally, it’s well suited to text-based images that require great clarity.
2. Image quality 📷
Image quality refers to the accuracy of the representation of details stored in the pixels, such as color, contrast, and shadows. A high-quality image will look clear and sharp. Typically, the higher the image resolution, the higher the image quality, since there are more Pixels Per Inch (PPI) to display it.
With both of these image file formats, there are some size limitations to consider. For example, AVIF has an image resolution limit of 65,538 by 65,536 pixels and a size limit of 6,780 by 4,320 pixels. However, as I mentioned earlier, it is possible to exceed the limit by rendering independently encoded tiles.
On the other hand, the maximum pixel dimensions of a WebP image are 16,383 by 16,383. This is a strict limit that you can’t exceed.
We can also compare AVIF vs WebP in terms of bit depth. This term refers to the number of bits that are needed to show the color of a single pixel. Essentially, the higher the bit depth, the more colors the image can display.
Like JPEG, WebP only supports a maximum bit depth of 8, which is roughly 16 million colors. AVIF extends this a little, supporting a bit depth of 10. Therefore, AVIF is capable of displaying many more colors, but the resulting files can also take up more storage space and require greater processing power.
Furthermore, both file formats support High Dynamic Range (HDR) images. This can make them great for photography. However, AVIF takes the lead in this aspect with a wider color gamut and support for chroma sub-sampling. This way, you can reduce the color information in the signal without affecting the image quality.
3. Browser and platform support 💻
So far you probably like what you see and you might be thinking that AVIF or WebP are the right move for your website. Before you pull the trigger and go all in on either image format though, it’s important to consider both browser and platform support.
Browser support
If a file format is compatible with your browser, it means that the image will display correctly on the page. Additionally, it enables you to take various actions like downloading the image or saving it to your computer. However, due to some of the modern image formats being so new, browser support has only relatively recently started catching up.
Since WebP has been around a lot longer, it gained widespread adoption before AVIF. However, as of January 2024, both formats are now supported by all popular browsers including Microsoft Edge and Firefox. Plus, all major mobile browsers support WebP, and most also support AVIF. The notable mobile exceptions that do not support AVIF yet are the Opera Mini, the QQ Browser, and the KaiOS Browser.
Here are the numbers for global WebP and AVIF support, according to Can I Use:
- WebP – approximately 96.86% of web users are using a browser that supports WebP.
- AVIF – approximately 93.16% of web users are using a browser that supports AVIF.
So while both enjoy support with a majority of browsers, WebP still has a slight edge.
Platform support
In terms of platforms, while we don’t have information on every single one, we do know that as of version 6.5, WordPress supports AVIF [2]. If you’re a WordPress user like I am, then this is great news. It means that in theory you can upload AVIF files to your WordPress site just like you would JPGs, PNGs, or even WebPs.
In reality though, things are a bit more complicated.
The reason for this is that the image processing on the server-side also needs to be set up to handle AVIF files and that processing is controlled by your hosting company. The easiest way to check if your WordPress currently supports AVIF is through the WordPress dashboard.
Go to Tools ➡️ Site Health. You’ll then see a Status tab and an Info tab. Click on Info. Then expand the Media Handling section and look for something called GD supported file formats:
As you can see from the screenshot above, even though I’m on the latest version of WordPress, it doesn’t mean that I can automatically upload AVIF files. This is why I was unable to do a triple column setup earlier when I showed you the compression capabilities of the three file types, and instead I resorted to taking a screenshot of all three.
On the plus side, you will very rarely encounter this problem with WebP, and as time goes on, the same will be true for AVIF. In the meantime though, what if you do want to use AVIF files on your WordPress site but you don’t see them being supported when you check the Media Handling section?
Let’s go over that next.
How to use AVIF and WebP in WordPress (in 2 steps)
WordPress has been supporting WebP files since version 5.8, and therefore, with rare exceptions, you can upload your WebP images with no problems, just as you would a JPEG or a PNG.
However, if you use an earlier version of WordPress or you want to use both AVIF and WebP, you can do so using a plugin like Optimole. The process is simple. This is how you do it:
Step 1: Install and activate Optimole in WordPress
Optimole is an all-in-one image plugin that stores, compresses, and scales your WordPress images. Better yet, it’s cloud-based, so it doesn’t put a strain on your server.
What’s more, Optimole picks the right image size for your user’s browser and viewport. Plus, it uses lazy load and a content delivery network (CDN) to speed up image delivery.
You can use Optimole as a free WordPress plugin to serve images to roughly 5,000 users a month. Or you can upgrade to a premium plan for more monthly visits, extra support, and additional features.
To install Optimole, head to your WordPress dashboard and select Plugins ➡️ Add New. If you’re using the free plugin, simply search for “Optimole.” Then click on Install Now ➡️ Activate:
If you choose the premium version of the tool, you’ll need to download your zip file from the Optimole website. Then, from the Plugin screen, select Upload and find the file on your computer.
Step 2: Enable AVIF conversion
Now that you’ve activated the Optimole plugin in WordPress, WebP support is turned on by default. Therefore, you don’t need to tinker with any of the settings to be able to use WebP images.
However, for AVIF images, you’ll need to head to the Optimole settings to enable AVIF conversion. All you have to do is head to your WordPress dashboard. Then go to Media ➡️ Optimole and switch to the Settings tab:
You’ll land in the General settings, but for AVIF conversion, click on Advanced. Then visit the Compression tab:
Here, you can adjust all the compression-related settings. For instance, you can enable GIF to video conversion, and serve CSS and JavaScript through Optimole to boost loading times.
At this point, find Enable avif conversion. Then, use the toggle to activate the feature. It’s as simple as that!
💡 Note – if you enable Optimole’s AVIF feature, Optimole will only serve AVIF images to visitors whose browsers offer AVIF support. Optimole is able to achieve this functionality thanks to its real-time image optimization technology.
Conclusion 🧐
While JPG and PNG were once the most dominant image file formats, there are now lots of new options including AVIF and WebP. Due to some of their differences, you can better decide which format is right for you, AVIF or WebP.
For instance, AVIF creates much smaller file sizes. Meanwhile, it can compress images without any unappealing side effects like blockiness and blurring. However, WebP is more widely supported. Better yet, with Optimole, you can use both AVIF and WebP in WordPress and make sure visitors get the best format for their unique browser and device combination.
🖼️ For some other ways to optimize your site’s images, check out our full guide 👉 on how to reduce image size.
Do you have any questions about AVIF vs WebP? Let us know in the comments section below!
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!