Insights
Introducing WebP and AVIF: the new image file formats you should use on your website
Images always play a leading role in any website. And this is so because while texts are usually skimmed, images always attract more attention. That’s why most customers always ask for many (and large) photos on their websites. However, images consume about half of the loading time of any web page. It is by far the most resource-consuming content, ahead of style sheets, scripts or web fonts. And performance is critical, because if pages load slowly they will have a very poor user experience and will not rank well in Google.
Finding the perfect image file format has been one of the toughest tasks in web development. There have always been three factors to contend with. First, compression: the smaller the file size, the shorter the waiting time. However, higher compression often compromises the second factor: quality (especially important today due to 4K monitors). Finally, the last factor to take into account is support, because even if an image is light and of good quality, it will be of no use if the most important web browser cannot recognize it.
For all that, images haven’t changed a bit since the early 90s. .JPG, .PNG and .GIF. have ruled the Internet ever since. But in recent years new files have appeared. They are .WebP and .AVIF and they offer quite a few advantages over their predecessors that we are going to analyze in this post.
Okb Interactive Studio
Mejora la carga de tu webThe old school: .JPEG, .PNG y .GIF
But before we start analyzing these new image file formats, let’s take a look at the traditional ones. .JPG, .PNG and .GIF have remained strong to this day because each one has something that the others don’t. While .JPG (‘Joint Photographic Experts Group’) has made compression its main strength, .PNG (‘Portable Network Graphics’) has found its opportunity by including an alpha channel (transparency). On the other hand, the image detail of the .PNG format is very high, but its compression is lower than that of .JPG. That is why .JPG is popular for large photos, while .PNG is common for smaller flat images, such as logos. Finally, .GIF (‘Graphics Interchange Format’) specialized in animations when videos on the Internet were a pipe dream. The 2000s were bad years for .GIF due to the rise of Flash, but now, even though video formats are widely accepted by web browsers and animations can be achieved only with CSS, .GIF is getting a second chance on social media networks.
.WebP: the revolution that arrived from Palo Alto
It took more than twenty years to make a difference in the web image panorama. In order to create a much faster Internet, Google set out to end the reign of traditional image files by developing a new format that compressed better than .JPG but with the quality and alpha channel of .PNG as well. Thus emerged in 2011 the open source image file format .WebP (aka weppy). In 2014, Google’s web browsers (Chrome and Android) started supporting .WebP, which meant that its popularity has continued to grow until today.
As you can see above, the .WebP image (on the right) is almost 40% lighter than the .JPG image (on the left) but the quality is quite similar. Imagine how much a website’s performance could be improved if all its images were transformed into .WebP!
.AVIF: new, but going for it
In 2019, when .WebP was beginning to revolutionize images on the Internet, a new image file format burst onto the market. It was .AVIF, developed by Alliance for Open Media, a non-profit organization promoted by companies such as Netflix, Amazon, Google or Apple that aims to create open source products that avoid the patent wars that traditionally hinder technological innovation. The great contribution of .AVIF is basically that it compresses images much better than .JPG. even much better than .WebP! For example:
Taking as a reference the same image as in the previous example, you realize that while the .WebP file represents 40% less than the .JPG file, the .AVIF file represents approximately 80% less. So the final size using .AVIF is about half that of .WebP. And the difference between the two images is imperceptible to users! .AVIF also achieves better quality and size results even on flat images (such as graphics and logos, although for these cases it is much better to use the .SVG format) and, like .WebP, it can also include the alpha channel.
Increasingly accepted
Compatibility has been the big problem with new generation image files until now. Most web browsers did not accept them, so web designers felt safer using only .JPG, or .PNG images in their projects. Chrome was the first to support .WebP images since its version 32, released in January 2014. Although today it is the most widely used browser with 65% of the world’s traffic, at that time it only accounted for about 45% of the total, with the other major web browsers (Firefox, Safari and Explorer) sharing another 45% between them all. And they didn’t support .WebP images…
Today Chrome is more widely used and fortunately other web browsers have also been gradually supporting these new image formats in their updates.
.WebP is currently supported by almost all major browsers. In addition to Chrome, Opera also incorporated it in 2014, while Edge and Firefox did so in 2019. Safari, the only major holdout, has accepted it since the end of 2020. .WebP is also widely supported by browsers on mobile devices: Android Browser, Opera Mini and UC Browser have supported .WebP for a long time (2014, 2015 and 2016, respectively), iOS Safari since 2020, Firefox and Samsung Browser since 2021…
The .AVIF format is less accepted than .WebP and its incorporation in some browsers is still very recent. The first to incorporate it was Chrome in its desktop version 85, which was released in August 2020. Recently it has also been supported in the desktop browsers Opera (September 2021) and Firefox (October 2021), and in the mobile browsers Opera (February 2021), Samsung (April 2021), Chrome and Android (both in September 2021). Among the big ones, only Safari and Edge are left out so far.
How to use the new image file formats
To include a .WebP or .AVIF image in a web site you can use the ‘src’ attribute in the ‘img’ tag, just as you would with a .JPG, .PNG or .GIF image. However, older browsers that do not support these types of files will not display anything.
To avoid this problem, there is a very simple workaround: use the ‘picture’ tag instead of the ‘img’ tag every time you want to insert an image on your website. See example below:
<picture>
<source srcset="your-image.avif" type="image/avif">
<source srcset="your-image.webp" type="image/webp">
<img src="your-image.jpg" alt="Test image">
</picture>
Browsers will go into the ‘picture’ element and load the first image they can recognize, ignoring those they cannot. So if we place the different options from the lightest to the heaviest, we will ensure that users will always receive the most optimal image that their browser allows, also ensuring that they will always receive something.
How to generate .WebP and .AVIF images
So much for the good news. But now comes the not so good news… Although more and more browsers support the new image file formats, generating them is still a very annoying process. For example, Photoshop (the most popular image editing software worldwide) does not support .WebP or .AVIF, at least not natively, although there are some plugins that can be used for it. So as of today it is not possible to generate images in these formats from other formats using Photoshop.
If you use WordPress to manage your site, there is no good news either. The world’s largest CMS (with almost 500 million websites around the world) does not support .AVIF, while .WebP has only recently been added. Fortunately, there are many third-party plugins (free, paid or freemium) which convert traditional image file formats into modern formats on the fly, such as ImageKit or Image Engine.
There are also free web applications that convert .JPG images into .WebP or .AVIF easily. One of our favorites is Squoosh. You can also use Node.js modules: for instance the well-known image minification module Imagemin has an extension to convert images to .WebP automatically.
Improving the loading problems of your website is undoubtedly one of the most complicated but at the same time most beneficial tasks. To achieve this you can work on several points (improve your server and reduce requests to it, work with CDNs, minify your code…) but nothing will have as much impact as reducing the size of your images. And using .WebP and .AVIF contributes significantly to this.
Did you find this post interesting? Share it!
Your contacts will like to read it, for sure!
