Optimize graphics with WebP

_{Interface Developer Blog What week is it? What is the school week now? Even or odd?}

According to the Web Perfomance Today website, the average page weight in 2015 is 1109 KB . According to forecasts, by 2018 there will be about 2 MB . Image loading takes an average of 64% (711 KB) of the total page load time. Therefore, it is necessary to start optimizing the page loading speed with graphics.



Graphics are optimized in two ways:

• decrease in the number of requests
• weight reduction graphics

To reduce requests, sprites are used and graphics are pasted in via base64 . To reduce the weight of the graph is compressed (with and without loss of quality).

Unfortunately, compression often leads to poor quality and a small gain in size. Perhaps this is why Google in 2010 created its own image compression format - WebP .

Support

We believe Can I Use , which says that WebP is supported at 64.77% in the world and 56.22% in Russia, which gives us reason to use it. From browsers it is Chrome, Opera, Opera Mini, Android Browser, Chrome for Android.

Testing Compression

Before using WebP, check how effective it is. I downloaded 12 png and jpg images. And compared the sizes before and after optimization:

')

• Original files - 6.7 MB
• After compression - 5.4 MB
• Original WebP format - 1.6 MB
• After compression in WebP format - 1.8 MB

The gain in size turned out to be 3.8 MB , i.e. 70.3% . Since images are on average 64% , the gain in page loading speed will be ~ 44.8% for users whose browsers support WebP!

We use WebP

You can use the new format through the img tag and through the css property background . Of course, let's not forget about users without the support of this format.



To determine WebP support, you can use Modernizr or a snippet . After that write a fallback:

 .no-webp .logo { background-image: url(logo.png); } .webp .logo { background-image: url(logo.webp); } 

Through img it would seem possible to make two images too, and hide one of them. But the problem is that the browser will still request both PNG and WebP, which, on the contrary, will increase the page load time.



Another way is to request an image in WebP format, if it does not load, then display PNG.

 <img src="image.webp" onerror="this.onerror=null; this.src='image.png'"> 

This method has a similar problem - if the browser does not support WebP, it will make 2 requests for each picture, which will increase the loading time.

Another variant

Not finding a native solution, I wrote a small library simple-webp , which solves the problem of two queries.



Usage example:

• Add to cap
  
  

   <script async src="simple-webp.min.js"> 

• Instead of standard images, write by template
  
  

   <noscript data-webp><img src="example.png" alt=""></noscript> 

The library checks the support of the WebP format, then adds / removes the webp/no-webp to html and if the browser supports WebP, the library will replace the extension of your image with .webp and load it. Otherwise, the browser will load the image in the original format.



For example, if the browser supports WebP, then instead of example.png load, if not - example.png .



Noscript necessary to prevent downloading images, and if JavaScript is disabled, the user will still see the image.



The library is publicly available on Github , occupies 2 KB in uncompressed form.

PS In the examples for optimization, I used the application under OS X - ImageOptim. To convert to WebP - WebPonoize.



PSS Download the archive with images on which I made a comparison can be on the link .

UPD # 1 In the VEG comments , pointed out an incorrect test, and provided links with tests from Mozilla 2013 and 2014 . They show that the level of compression in WebP and other formats is approximately the same. The profit from WebP is that with strong compression the images look better.



UPD # 2 The way through NOSCRIPT has a big disadvantage in SEO, because images are not indexed. pepelsbey in the comments suggested to use .