Webp comparison PNG, JPG experience optimization

The background is as follows: when we were showing our front-end monitoring, we tested the company’s M station and found that the performance score was still poor. Through analysis, we found that the size of the picture was large, but one of the pictures was reduced by 90% after it was converted into WebP by Aliyun

The original:

Turn webp:

Ali Cloud object storage image processing link

And take a look at webP support:

Found that Safari does not support it, so use progressive processing for supported browsers

JavaScript checks to see if WebP is supported:function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gc A"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp; base64," + kTestImages[feature];
}

Copy the code

After use: the effect is very good, the page opening speed is obviously improved in the browser that supports WebP, but a strange phenomenon is found in the actual test: PNG takes less time than WebP for the same size image, why?

Restore scene:

Two pictures of the same size

Page 1:0.67ms for downloading resources

In solving the above problems, I first went to understand the meaning of the three formats

GIF, JPG, PNG, webP

jpg

JPG is a lossy image format based on direct colors. Due to the use of direct colors, THERE are 1600W colors available in JPG (2^24), while the number of colors recognized by the human eye is only about 1W, so JPG is very suitable for colorful images, gradient color. JPG lossy compression can greatly reduce the size of an image by removing details that are not visible to the naked eye.

However, JPG is not suitable for ICONS and logos because it has no advantage in file size compared to GIF/PNG-8.

png

PNG uses lossless compression. PNG has better transparency support than GIF and is smaller in size for the same quality. PNG is a great alternative to GIF, but one obvious drawback of PNG is that it does not support animation because of its high quality, lossless compression, which makes it ideal for saving source files or image formats that require secondary editing

PNG is as rich in detail as JPG, and the file size is at least five times larger than JPG, but the quality of the image is very little improved. So unless the quality requirements are extremely high, it is recommended to use JPG for colorful web images.

webp

WebP images is a new image format developed by Google. Compared with PNG and JPG, the size of WebP image is reduced by about 30% under the same visual experience. In addition, WebP image formats support lossy compression, lossless compression, transparency, and animation. In theory, it can completely replace PNG, JPG, GIF and other picture formats. Of course, webP has not been fully supported at present.

To be more convincing, not incidentally, I simulated several formats myself, first converting PNG to WebP and then scaling PNG to webP size

Eliminate the reasons for conversion from PNG to WebP of ALI Cloud OSS storage, and use webP conversion tool (specific usage introduction)

brew install webp
cwebp [options] -q quality input.png -o output.webp

where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.
Copy the code

Get your own experimental data (click here to view it) :

The blue block is the Conent Download time, which is the load time we need

Three groups of data are taken as follows:

First set of data:

Second set of data:

Third set of data:

It was found that webP took the longest load time of the three types on the whole, but some of the data was abnormal, with 1 or 2 times out of 10 data and the whole abnormal.

So I guess webP itself takes longer to download than JPG

According to Google’s tests, WebP is currently encoded 10 times slower and decoded 1.5 times slower than JPG.

If you are interested, you can learn the image coding and decoding technology. Webp uses libwebP-0.6.0 coding technology

One more question: Are the content download statistics for browser networks accurate?

The answer is not exactly

const http = require('http');
var server = http.createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.write('1');    // ttfb
  // res.write('2');
  setTimeout(function(){
    res.end('123');       // content download end
  },5000);
});
server.listen({
  port: 8888
})
Copy the code

A very small body segment that takes 5 seconds!

Res.write: When response.write() is called for the first time, it sends the buffered response header information and the first data block of the body to the client. When response.write() is called the second time, Node.js assumes that the data will be streamed and sends the new data separately. That is, the response is buffered to the first block of the body.

Anyway, webP’s ultra-light compression volume comparison is so slightly flawed, it’s really insignificant! The purpose of this article is to document the process of discovering why PNG takes less time than Webp for images of the same size, which is highly recommended!