What is WebP?

Webp is a new image format launched by Google. It has been 10 years since its release in 2010. It reduces the network request time for images by reducing the file size but achieving the same image quality as JPEG. It is important to note that the image should not be too large, webP supports a maximum number of image pixels of 16383×16383(width x height).

How about webP compatibility?

In certain scenarios, WebP is a good choice, such as large screen visualization, the image material website like Petal, jingdong Taobao and other e-commerce platforms, which are widely used. If you are interested, go to a website and check the Network panel to see what image scenes use WebP. It works, but that doesn’t mean it works across the board. The following graph shows webP compatibility across different browsers.

Webp compatibility

Obviously, with the exception of Internet Explorer and Apple, there are no major issues. The real problem, however, is that these two types of browsers cover a large number of users. If it is used, it needs to be degraded to PNG, JPEG, JPG and other supported image formats. Of course, if everything is chrome as the standard, regardless of compatibility issues, it can be used mindlessly.

Compare WebP with similar image formats

Can WebP really have its cake and eat it cake in terms of lightness and color? Let’s do a test. Recently in learning English, I used a mind map of English knowledge points as a case, test website see the end of the article.

Nominal clause

If you’re not interested in English, don’t pay too much attention to the above image, just know that this image was originally 1.14m in PNG format. If you don’t do any processing, especially if the network is not good, the loading is really slow, there are parts of the blank screen, and then a little bit of loading… Poor experience. So what happens when you switch to WebP? Take a look at the comparative data.

Webp conversion data alignment

A picture is worth a thousand words, and the webP format is more than half the size, so let’s look at the visuals, and this is webP format

The webp

Carefully Concoran, visual Angle, is there a significant difference? Hardly any, and the zoom is about the same, but the fact is, the image is much smaller. Webp really has it both ways.

How to convert images from other formats to WebP format?

- As programmers, we prefer to implement nodejs. Nodejs is used as an example. Install cwebp-bin CNPM I Cwebp-bin (Windows, CNPM is recommended) 2. Write conversion method towebp 3. Input the original picture address and output picture address, call towebP function test 4. The original image size should not exceed 16383x16383(width x height). This is the maximum number of pixels webP supportsCopy the code
const { execFile } = require('child_process');
const cwebp = require('cwebp-bin');
function towebp (src, target) {
    return new Promise((resolve, reject) = > {
        execFile(cwebp, [src, '-o', target], err => {
 if (err) { reject(err); }  resolve(true)  });  }) } Copy the code

Webp timing and demotion handling

Webp is not to replace the original picture format, so there is no need to take all the pictures to turn, if the picture is particularly small, in fact, there is no great effect into WebP. You can refer to the selection of picture formats in different scenarios on E-commerce platforms such as Taobao and Jingdong. There is browser compatibility, to do degradation. Here, the HTML5 picture tag is used to do the degradation.

<picture>
  <source srcset="/ noun clause. Webp"> </source>
  <img src="/ noun clause. PNG" alt="Noun clause">
</picture>
Copy the code

In this case, the browser will preferentially parse webP images, and if not, demote PNG images. Either way, you won’t download both. Of course, if it is ie, then it may not recognize the new html5 tag, you can use html5shiv this big patch, let ie support, at the end of the text with html5shiv CDN address. Let’s take a look at the effect of ie degrading to PNG, using HTML5shiv

Ie relegation

Chrome display will definitely work, so here’s a look at resource loading: only one image format will be loaded, which is exactly what we expected

chrome–webp

If you don’t want to do it in HTML, you can do it in JS

 // Here!! []. Map is a validation of low-level IE to prevent subsequent methods from failing
 letallowWebp= !! [].map &&document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') = =0;
Copy the code

Practice in the project

Related to user – defined image processing, will provide an upload interface, can be in the background to do a user uploaded picture processing, the large image into WebP, and then the front end to do degradation processing. For the user, the loading speed is obviously faster, as for the quality and color of the image before and after conversion, almost no perception.

conclusion

This paper starts with the concept of WebP, analyzes the compatibility, advantages and disadvantages of WebP successively, and compares it with other picture formats, and finally gives a set of back-end conversion scheme and front-end degradation processing strategy. Finally, amway is a wave of my English learning website, including basic English grammar, good morning sharing focusing on graphic presentation and good night sharing focusing on short English videos.

enote

A link to the

  • Webp test site: https://zhitu.isux.us/
  • Html5shiv: https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js
  • Petals: https://huaban.com/
  • Jingdong: https://www.jd.com/
  • Taobao: https://www.taobao.com/
  • Enote English learning website: https://lengyuexin.github.io/