New image formats: WebP and AVIF

[ayeshshiddika11]

Do you know about the new generation of image formats? Google has long recommended that WebP and AVIF formats be used on the Internet, but their use has not yet become widespread due to their incompatibility with some platforms and browsers.

Do you want to know more? Keep reading and discover what they are, the advantages of using them and also some disadvantages. Although there are still some cons, it is worth getting to know them and preparing your web project for their implementation.

Before getting into the subject, you can read how images influence a web project, the most commonly used traditional formats, and their uses, in a previous blog post: Do you know the importance of images in your web project?

I also recommend that you familiarize yourself with the Google Page Speed ​​Insights tool . For those who don't know it, it's a very simple application made available to web developers or anyone lebanon phone data else who is curious. It allows you to check the loading times of Internet pages on both mobile devices and PCs and provides you with a list of problems and possible solutions to optimize these times. You only have to enter the domain of the website you want to measure, and the tool will give you a detailed analysis with suggestions for optimizing the website you have consulted. Its interface is as simple as you can see in the following image:

google page speed insights interface

To make it easier to understand, I give you a real example of the comments that can be obtained from the tool:

google page speed insights response examples

One of the recurring recommendations offered is to use new generation image formats in any web project, with the aim of reducing website loading times and thereby improving the user experience, especially on mobile devices, which also directly influences the organic positioning of the website.



If you've already made up your mind, go ahead and discover the new generation image formats.

What is WebP format and what is it used for?
Webp is an image format developed by Google, and which the company is betting on as a substitute for JPG or PNG in online projects that it likes to position better.

It basically involves maintaining the quality of the images with higher compression ratios than those offered by JPG and PNG . In addition, it allows the creation of animated graphics such as GIFs, and with transparent areas like PNG files, but always with less weight. Therefore, it is a very light and versatile format. If you want to consult more details about it, you can visit the following content offered by Google: An image format for the Web .

If you want to see some examples of the differences in weight between these different WebP formats and compression modes, you can check out Google's WebP Gallery . Check out the examples to get an idea of ​​the quality of the images and their reduced weight.



What is the AVIF format and what is it used for?
For its part, the AVIF format is an image format that surpasses even WebP in compression , and also supports animations and other advanced features such as greater color depth, the possibility of carrying out lossy or lossless compression, or using a monochrome mode, among others.

This is Google's new attempt to overthrow JPG. It should be noted that JPG is a format that was created more than 25 years ago, when the use of digital images was completely different from today. Therefore, it is understandable to think that it will end up prevailing, but so far, websites still seem to resist adopting it, and there are still not many platforms that support this format.