WebP: we put the turbo with Google image format

WebP is an image format created by Google and presented in 2010. Remained a little hidden in recent years, in recent months has returned to make people talk about itself. How come? First because it has become one of the parameters suggested by PageSpeed Insights, but also because the time is actually ripe for adoption.

WebP benefits

We know very well that photos are an obstacle to the download speed of a site. Over the years and the various projects, different techniques have been adopted to make the projects more and more performing: the right choice of formats, the size of the images suitable for the device, double compression, progressive loading. The results have been effective. The adoption of the WebP format will bring further benefits: a huge reduction in the weight of the file.

My tests

In order to use it in projects, I first performed several tests to verify the actual reduction in terms of KB, the degradation of the photo passing from JPEG format to WebP with quality reduction, the compatibility with various browsers.

Take for example the photo above: in its original JPEG format, at 72dpi, with size 1,200px by 800px. Its weight is 511 KB. I didn't compress it.
Adopting double compression as I have done so far with the various projects, its final weight is 343 KB (-33%) and the quality has remained the same.

Starting from the uncompressed photo I created a 100% quality WebP version with Sketch and convert.co. With Sketch compression was a disaster: 1.8 MB (+250% compared to the uncompressed file, +425% compared to the compressed file)! With the online service convertio.co it was better: 305Kb (-40% compared to uncompressed JPEG and -11% compared to compressed JPEG).

Not happy about the result obtained by Sketch — I was expecting a real performance gain right away — I gradually reduced the quality of the photo during the export phase to find a balance between quality and weight. Here are the results:

Test values

% Quality : final weight (percentage reduction compared to uncompressed JPEG, percentage reduction compared to uncompressed JPEG)

In all cases the quality of the photo has deteriorated but the difference with the original is almost imperceptible up to 50%. Outlines are lost at lower percentages.

I repeated the same test with a photo containing written texts, where the loss of quality is more visible. The result is similar. The texts are well readable even at 10%, but from 40% down you can see a strong degradation of the colour.

In general, we can reduce photo quality between 75% and 50% without visibly losing quality and gain between 10% and 30% weight. Specifically, however, it is important to evaluate the photos individually, or the web project in its entirety, and decide whether to further reduce weight or prefer better quality.

WebP compatibility

Currently, WebP is compatible with almost all browsers, except Internet Explorer and Safari, up to version 13. In fact, Apple's browser will gain support for WebP with version 14 currently in the preliminary phase. With browsers not compatible with WebP you will still be able to use the picture tag to show the classic JPEG format.

<picture>
    <source srcset="upload/psd-to-html.webp" type="image/webp">
    <source srcset="upload/psd-to-html.jpg" type="image/jpeg">
    <img src="upload/psd-to-html.jpg" alt="PSD to HTML">
</picture>

So green light to WebP: starting from the next projects, in fact, this format can be adopted for images in HTML templates and in some WordPress themes (with content integration).

Graphics software

Both Sketch and GIMP natively integrate the export of graphic files into WebP. A plugin must be installed for Photoshop. However, Affinity Designer does not support it to date, despite constant requests for adoption.

Download

I also make the test photos available to check their quality.