We prepare WebP correctly

Habr is already saturated with articles on the subject of “new” image format of WebP ( description , comparison with JPEG2000 , comparison with BPG , usage , connection on the site ). Unfortunately, the following questions remain open: how to connect WebP correctly on the site so that “everything works”, and how much better (less) PNG / JPEG is. In this post I will answer both questions.

I assume that you are already aware of image optimization, know how to convert images to WebP , understand the difference between using JPEG and PNG on the site, know the tools of ExifTool , jpegtran , mozjpeg , JPEGrescan , optipng , pngcrush , pngwolf , zopflipng and TruePNG , and also distinguish pasteurization milk and posterization of images .

If everything is so, then we get to the point.

Pros WebP

All sources mention a significant reduction in the size of images, which is PNG, that JPEG, if they are recoded into WebP. In this case, transcoding should be performed with preservation of quality. In Airy.rf, for three years now, automatic optimization of images without loss and with minor losses has been used (2 modes). This allows you to quite accurately compare when WebP wins in comparison with the already optimized PNG (run through TruePNG, pngwolf and zopflipng) and JPEG (ExifTool, mozjpeg, translation to png), and when not.
')
On a test sample of 13,000 images, WebP showed a 31% gain over already optimized PNG and JPEG files (580 MB vs. 837 MB). WebP files are about a third smaller than the already optimized JPEG and PNG analogs. Here you need to make a reservation that the PNG translation in WebP is lossless, and the JPEG translation is performed with minimal losses (quality 100), this allows you to automatically ship WebP for all browsers that understand it, without fear of something “ smash "at customers.

In the overwhelming majority of cases, the WebP's gain over already optimized JPEGs (mozjpeg) was no more than 10%. Exceptions were in those cases when it was impossible to safely cut out EXIF ​​data (in particular, a palette) from JPEG files, and transferring them to WebP yielded significant gains. Therefore, if you create JPEGs immediately in a “normal” scenario, then in most cases there will be no significant gain. PNG files, even after optimization, are relatively good (30%) “lose weight” if translated into WebP.

More importantly, in relation to all optimized images only in 10% of cases (yes, a sample of 13000 images - it was only 10% of all optimized images) WebP "without loss" gave a gain in size. For the remaining 90% there was no win (75% of them are JPEG files). The numbers may still be due to a rigorous approach to optimizing lossless images: it is possible that fine-tuning WebP with “small” quality losses will give visually “the same result”, but it will be smaller in size. Unfortunately, in the automatic mode, it is impossible to estimate all 130 thousand images in order to understand how in each specific case lossy compression can be better. The images themselves do not represent any patterns: they are background pictures and galleries of hundreds of sites.

For reference, translating PNG to WebP

  cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt -lossless -q 100 

JPEG to WebP translation

  cwebp -quiet -pass 10 -alpha_method 1 -alpha_filter best -m 6 -mt -q 100 

An excellent illustration is the image to the article. The original PNG occupied 15.6 Kb. After optimization and posterization - 12.5 Kb. lossless webp from it - 8 Kb.

Real WebP Usage

If you have already learned how to correctly convert or save images to WebP (the topic is for a separate article), then there remains the problem of connecting WebP to a site that has already been raised here (the game is worth the trouble, because Chrome browsers already account for more than 2/3 of the market ). On the browser side, options with JavaScript are possible (using the noscript tag, ymatuhin ):

  <script async src = "simple-webp.min.js">
 <noscript data-webp>
	 <img src = "example.png" alt = "">
 </ noscript> 

And HTML5 (using picture, pepelsbey ):

  <picture>
	 <source srcset = "opera.webp" type = "image / webp">
	 <img src = "opera.jpg" alt = "The Oslo Opera House">
 </ picture> 

The second option is generally safer (although it may cover fewer browsers).

A “bulletproof” server version is also possible, which reads the browser's Accept header and ships the corresponding image (all WebP images need to be saved with the .webp extension to their counterparts) to the browser that supports them (changes in the client code are not needed). The easiest option for nginx looks like this:

  map $ http_accept $ x_airee_webp {
	 ~ * webp '.webp';
	 default '';
 }
 ...
 try_files $ uri $ x_airee_webp @ 404 

More accurate options (with proper support for Vary and Cache-Control) are maintained in the current state by Ilya Grigorik in the webp-detect project (for all main web servers).

Thoughts for discussion

Summarizing the practical experience of using WebP: it makes sense to do it , especially for mobile browsers (you can ship images in “poor” quality for them and really win the page load time). But first you need to configure the entire image optimization stack in “normal” ways: this will give a significant gain for all users. After that, WebP support in your projects can be implemented literally “in two clicks” (nginx configuration + conversion in the optimization process).

Also, in my opinion, the use of WebP can "work wonders" when spot-optimizing some types of images (which JPEG and PNG do not cope well with) - for example, a large number of small details against large homogeneous areas. And if you select the optimization parameters in the automatic mode for these types of images - it will be very cool.

Considering “doubling” the size of the images on the disc, I consider them irrelevant: if you write WebP only in cases when the file is smaller and you optimize all the images, they will take up even less space. And translating PNG images to WebP is significantly (at least an order of magnitude) less resource-intensive than PNG optimization (with an exhaustive search of compression options).

I would be glad to see your thoughts and applied experience using images in WebP format.