The loading time of a website is an essential parameter both for the user experience and for search engines. Which is why a solution is offered to you with the Webp format! Design elements, images also represent on average half the weight of a website. Until now, the most common practice was to compress them to reduce the file size. This allows faster loading. In 2010, Google created a new, more efficient image format, Webp.
What is the Webp format?
The Webp format was created by Google in order to replace the various standard image formats: jpeg, jpg, png, gif, tif.
The goal? Maintain good image quality while reducing their weight by 25% to 30% in order to optimize the loading speed of your website.
Concretely, the Webp format allows you to compress your images with loss or without loss. With lossy compression, you get the lightest image possible. But it does not allow you to keep a quality similar to the original.
Conversely, with lossless compression you considerably reduce the weight of the image, while retaining properties similar to the original such as:
- The number of colors and their rendering,
- The definition,
- Animation and transparent background.
In addition to compression, this new image format supports animated images (eg. gif) and transparency (eg. png). In other words, it processes several types of images, reducing the size and with a quality comparable to the moose.
However, the Webp is still little used. Despite ten years of existence, it has not become more democratic. In question, for a long time, many browsers still do not support it. But if you convert your Webp to JPG, all browsers will be able to display your photos.
Even today, it is impossible to display Webp images with Safari. Another obstacle, the most famous CMS, WordPress, still does not load this type of image by default. You must go through an extension to take advantage of the Webp format.
Case study: Webp performance against other formats.
While the Webp format faces some obstacles, they are not insurmountable. Especially since its advantages greatly outweigh its disadvantages.
I conducted a test way back. The performance of the site, both in terms of SEO and loading time, has been excellent since the images were converted to Webp format.
There is a loading speed of between 1 second and 2.5 seconds, regardless of the connection used (high-speed Internet or 4G), with a delay before interactivity (Time to interactive) of 1.9 seconds.
In other words, it takes less than 2 seconds for the site to:
- Display the first useful content (First Contentful Paint),
- Allow the user to click on an item and finally respond to the interaction.
In addition, on the site, there is no significant loss of image quality. They retain excellent definition to the naked eye. For good reason, the webp compression format allows you to reduce the size of an image:
.JEPG by about 50%, and 52% for a .PNG image.
It is even possible to compress your .JPEG images beforehand before converting them to Webb, in order to further reduce the size of the photo. On some images, it is possible to observe a slight difference in quality, especially if you choose the lossy compression mode.
However, this remains minimal unless you really need to display high resolution images (for example, if you are a photographer), Webp (lossless) remains a good compromise between performance and image quality.
The compression of photo-type images is therefore of real interest. On the other hand, for illustrations, logos and pictograms, SVG remains the preferred format.
View Webp images with Safari
Safari is the only internet browser today that does not support the Webp format. Except that the latter, although far behind Chrome, remains the second most used browser on mobile. It is therefore essential to be able to display your images in Safari so as not to lose visitors and therefore potential customers.
