How to reduce image resource size with WebP compatibility

Learning Army
and Pat Cloud CDN Service WebP adaptive function, to reduce the size of image resources for customers. In this article we will discuss the ins and outs of WEBP compatibility.

Objective
We know that the ideal Web page should be opened in 1 seconds, and in the overall size of the page, the picture is often the largest portion of the proportion (about 60% or more, more information click), you can also refer to as shown. Optimized images not only speed up page display, but also reduce the cost of mobile network traffic. PNG, JPEG, GIF, and SVG images produced by the original image generally have a great margin of compression. The following highlights a new picture format: WebP, revealing its mystical veil.

Solution: Optimize images with WebP
1. What is WebP?
WebP (pronounced weppy) is a picture file format that supports lossy compression and lossless compression, derived from the image Encoding format VP8. According to Google's tests, lossless compressed WebP has a 45% less file size than PNG files, and WebP can reduce the file size by 28% even after the PNG files are compressed by other compression tools. Learn more about WebP's official website documentation.

2. WebP Client Compatibility
Google Chrome and Opera browsers, as well as many other tools and repositories, support WebP, but not all browsers currently support WebP, as shown in the supported scenarios:

For detailed support, see the WebP support situation.

What problems does the WebP adaptive solution solve? using the WebP picture format, it is obvious that the benefits you can enjoy are:
1, WebP format Picture can provide better compression ratio and smaller file size, can reduce network transmission, make network transmission faster;
2, the network transmission reduces the traffic, can save the CDN traffic consumption, save the bandwidth cost;
3, there is still a part of the client does not support the WebP format, can be judged through the CDN layer, for the support of the client, in response to the WebP format of the picture; Unsupported client, response to the original. To achieve a seamless fit.

How do I tell if my browser supports WebP format?
As shown in the Chrome developer tools capture Display, you can view the response header and the request header related fields to know that the image has been automatically converted to WebP format by the CDN:
In fact, the HTTP Accept header can be used to determine whether the browser supports WebP format images, in combination, the Chrome browser when initiating the request, will take the Accept header, and its value includes: IMAGE/WEBP, which means that the browser supports WebP format picture ; see the following format: ACCEPT:TEXT/HTML,APPLICATION/XHTML+XML,APPLICATION/XML;Q=0.9,IMAGE/WEBP,/; q=0.8
In addition, the Content-type in the HTTP response header can be used to determine the true type of the file, for example: CONTENT-TYPE:IMAGE/WEBP, indicating that the server response is a copy of the WEBP format image.

How to achieve WebP self-adaptation through a cloud CDN?
As shown in the CDN layer to do WebP adaptive, there are several aspects to consider:

1. How does the CDN determine if the client supports WebP?
This section is currently judged by HTTP Accept header, and if supported, returns a copy of WebP and caches it, and returns the original if not supported. Detailed introduction is described above.
2. How does CDN implement real-time image format conversion?
When the user source station is not a WebP format picture, the CDN layer needs to support the real-time conversion of the original image to the WebP rendition, which is seamlessly supported at the CDN level. This scenario is like this:
The client browser requests a picture resource, for example: http://webp.example.com/test.png;

CDN through the Accept header has determined that the client browser supports WebP format images;

CDN back to the user source station to retrieve the original picture and the original image in real-time to WebP format, and respond to the client browser.

It is worth emphasizing that the cloud CDN has been seamlessly compatible with various mapping scenarios and access methods, including:
Original Access, example:/a.jpg

Thumbnail version number, example:/a.jpg!123

URL Graphing, Example:/A.JPG!/FORMAT/WEBP

Version number + URL:/A.JPG!123/FORMAT/WEBP

For detailed mapping scenarios, see image processing services.

3, how to achieve the same URL access, cache different copies of the picture?
This requires the use of the Vary mechanism in the cache, which caches multiple copies of the same URL based on the values of different header headers, while keeping the URL intact. For example:
Request header field ACCEPT:IMAGE/WEBP, response header needs to meet Vary:accept and CONTENT-TYPE:IMAGE/WEBP;

Request Header Field Accept-encoding:gzip-a response header needs to meet Vary:accept-encoding and Content-encoding:gzip

Above, after answering the above 3 questions, the CDN can realize the WebP adaptive. What happens when you turn on the WebP feature? and see below.

What's the effect after using WebP?
Let's do a test and visit a PNG image to see how it works before and after it's turned on.
1. Before opening
Randomly found a PNG image on the product document of the cloud website, which shows:

Through the display, you can get the following information:
–content-length:290334–content-type:image/png–x-cache:miss (S) from mix-hz-fdi-165; Hit (R) from ctn-zj-lna3-016
You can know that the image size is 290 KB, the picture type is PNG, and the CDN edge node has cache hit.
2. After opening
After opening the WebP feature, it is emphasized here that the CDN edge hit will not trigger the WebP auto-conversion. To trigger this feature, I did a manual refresh of the access link I just made. then re-request the picture resources, re-grab the package, see the following information:

Through the display, you can get the following information:
–content-length:69038–content-type:image/webp–x-cache:miss from 403-zj-fud-208, MISS to mix-hz-fdi-168, MISS from C tn-zj-lna3-016
It can be seen clearly that the image size is reduced to: KB, image format converted to WEBP format.

In summary, this test of a PNG image, through the CDN adaptive WebP, the size of the image from 290 KB reduced to a KB, the effect is very obvious, different picture format, compression ratio will be different. If you have more pictures of your website and want to improve the user experience and reduce the bandwidth of CDN access, we look forward to your testing and use.

Attached: WebP Effect test page

How to reduce image resource size with WebP compatibility