In the era of mobile Internet with the explosion of information, pictures basically occupy more than 80% of users’ attention, so people’s requirements for picture quality are getting higher and higher. JPG, JPEG, PNG and GIF formats have basically reached their optimization limits and it’s time to try something new.
WebP is a new image format launched by Google in 2010. It was first applied in Google products. The official version of Android Studio 2.3 released by Google recently includes updates to WebP support.
Compared with other picture formats, WebP occupies the least space when the naked eye can not distinguish the difference of picture quality. At present, major Internet companies at home and abroad have begun to apply this picture format.
Meituan cloud practice: Webp format recognition and conversion
In the experiment, the webP format is about 20% less than JPG format. This has a good effect on optimizing user experience and reducing CDN bandwidth consumption, but not all browsers support WebP, so in order to use webP, you need to do a little compatibility work.
The first is judgment, which identifies whether the source browser of the single visit supports webP format, and the second is execution, which replaces the original image with webP format if the browser supports it, and returns it. If not, the original format is displayed.
In the identification phase, we have two methods:
- 1) Determine whether browsers are supported by UAString. Classify browsers. If webP is supported, webP is whitelisted; if not, WebP is blacklisted. If it is a whitelist, the webP image is returned. Otherwise, the original image is displayed. The advantage of this method is that it only needs to maintain the whitelist regularly, and the logic is simple. The disadvantage is that it is not extensible, not testable, UA judgment will be inaccurate.
Caniuse.mojijs.com/Home/Html/i…
2) Read JavaScript cookies to judge browser support another way in Server processing is to read JavaScript cookies to judge. The advantages of this approach are stable performance, faster access, and no pressure to switch. However, the disadvantage is that the static page will lead to users switching browsers can not update, picture service failure. For example, when A user requests A page using webP supported browser A, the cached static pages all use WebP images. However, when the user accesses A web page using browser B that does not support WebP, an error message will appear indicating that no image is requested.
2.Client processing Client processing is a processing mode provided by Meituan Cloud for the main site of Meituan. In this processing mode, after the beacon WebP request is sent by the browser, the webP support status is determined by detecting its loading condition, and then the browser writes a cookie. After reading the browser cookie to determine whether webP is supported, the next operation can be performed.
There are also two ways to replace images:
Server-side processing has the advantage of being transparent to downstream developers, but the disadvantage is that the number of static pages cached doubles.
The replacement is as follows:
- The function that generates the URL (such as $deal->getImageUrl) implements the substitution directly by running the function
- For Varnish’s static page, it first identifies the browser request header type and then caches one and two copies of each of webP and traditional JPG for processing. Then make the substitution where the URL was generated.
2.Client processing on the Client side can better cope with the situation of static pages, mainly for lazy loading (not the first screen) of the picture processing, directly by modifying the lazy loader to achieve. There is no particularly good way to load images that are not lazy. Currently, you can replace the path to process.
Client processing effect is actually good, meituan page more than 90% of the pictures are lazy loading, basically can meet the needs. For most users, using Client processing for WebP transformation is a good choice.
Meituan cloud object storage service now supports WebP function, interested friends can actually compare and see the difference. Mos.meituan.com/activity/we…