Not sure about the difference between AVIF vs WebP for images? 🖼️
PNG and JPG have always been the go-to image file formats for WordPress. However, there’s now a growing list of next-gen formats like AVIF and WebP to compete with them. If you’re just discovering them, you might not know what these formats are or which is best for your needs.
It turns out, there a few key differences in terms of compression, quality, and browser support when you’re considering AVIF vs WebP. So, you’ll want to be sure to consider all of these factors. Plus, using AVIF and WebP in WordPress is slightly more complex than simply uploading your images.
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 still very new. It was established only in 2019.
WebP was initially launched as a replacement for the traditional image formats JPEG, JPG, and PNG. Since it has been around a lot longer, WebP is supported by most browsers and platforms:
WebP makes a strong case for true-color, photographic images, since it’s able to display a higher number of pixels. Plus, this format delivers super fast loading times, as WebP files are 26% smaller than PNG files and up to 34% smaller than JPEG files .
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 differences
To settle the debate between AVIF vs WebP, you’ll want to look at their key differences. This way, you can choose the best format for your website and your needs. With that in mind, let’s consider three important factors:
- Compression 🗜️
- Quality 📷
- Browser support 💻
1. Compression 🗜️
Image compression is one of the most important considerations when choosing between AVIF vs WebP. With a small file size, you can increase your loading times and reduce Large Contentful Paint (LCP). In turn, you’re able to provide a better user experience (UX) and gain a higher search ranking.
WebP was introduced as a way to achieve a better quality image with a file size similar to a JPG:
However, as with JPGs, you can sometimes fall victim to some unattractive side effects like blockiness, blurring, and color-branding.
With AVIF, you can get an even smoother, sharper image with the same file size. Plus, it’s rare to witness any of the above negative effects. This makes AVIF the superior choice for very precise images like graphics. Additionally, it can make it better suited to text-based images that require great clarity.
2. 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 we 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 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, since some of the modern image formats are so new, browser support can be lacking.
Since WebP has been around a lot longer, it is more widely accepted than AVIF. It’s supported by all popular browsers including Microsoft Edge and Firefox. Plus, all major mobile browsers also support WebP formats.
On the other hand, AVIF still has a way to go in terms of browser support. Chrome and Opera offer full support for AVIF images, while Firefox users can configure this setting manually. On mobile, however, you can only use AVIF on Chrome for Android, Samsung Internet, and the Android Browser.
Here are the numbers for global WebP and AVIF support, according to Can I Use:
- WebP – approximately 96.30% of web users are using a browser that supports WebP.
- AVIF – approximately 79.81% of web users are using a browser that supports AVIF.
So while both enjoy support with a majority of users, WebP is the clear winner when it comes to WebP vs AVIF browser support.
How to use AVIF and WebP in WordPress (in 2 steps)
Currently, all versions of WordPress above 5.8 support WebP by default. Therefore, you can upload your WebP images as normal.
However, if you use an earlier version of WordPress or you want to use both image file types, you can do so using a plugin like Optimole. Now, we’re going to show you how!
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:
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.
While JPG and PNG were once the most dominant image file formats, there are now lots of new options including AVIF and WebP. Fortunately, there are a few key differences between these formats that help settle the debate between AVIF vs 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!
5 Essential Tips to Speed Up
Your WordPress Site
Reduce your loading time by even 50-80%
just by following simple tips.