1. Why webP?

GigaOM has reported that YouTube’s WebP video thumbnaps speed up web pages by 10%. Google’s Chrome Web App Store saves several terabytes of bandwidth per day by adopting WebP images, reducing the average page load time by about a third. Google+ saved 50 TERabytes of data storage per day by adopting the WebP image format for its mobile app.

The same mass, smaller volume, faster loading speed.

Why not?

There are basically two reasons to stop using WebP

(1) Compared with JPG, the decoding speed is 1.5 times slower

A lot of the performance bottleneck is the speed of transmission, not the speed of decoding (which is why SSDS are so much better for computers),

The reduced loading time is far greater than the time required for decoding.

Reference to explore WebP some things test demo

(2) Compatibility problems

2. Webp compatibility problems

Webp compatibility is not very good, especially on ios Safari. Here we use JS on the client to detect whether WebP is supported, support WebP image request, do not support to keep the original format.

The following is a check code provided by Google to check browser support for WebP Lossy lossless alpha transparent Animation ANIMATION

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

}

The use scenario of our company is relatively simple, just detect the lossy format of WebP

(function check_webp_support() { var _KEY = "lvtou_ifSupportWebp"; var ifCheckAlready = window.localStorage[_KEY]; if (ifCheckAlready) { return ifCheckAlready; } else { check_webp_feature("lossy", function(feature, Result) {//localStorage can only store string window.localStorage[_KEY] = result? 'true' : 'false'; }); }}) ();Copy the code

3. Usage

When support is detected, change the link of the image to webP

Our company uses Qiuniuyun as CDN. Using WebP is relatively easy, just concatenate some parameters after the original request link.

The original link 196 KB

http://www.***.com/test.jpg

Webp link 30.4 KB

http://www.***.com/test.jpg?imageMogr2/format/webp

Splicing parameters can be simplified with seven niuyun picture style, do not expand here, there is an official video tutorial.

4. Lazy loading of Lazysizes

Images account for the most traffic on a web page, so there is no need to request images that are not visible.

I usually do lazy loads, I use lazysizes.

Lazysizes are simple to use and do not need to be initialized once introduced. Add the lazyload class to the image that needs lazy loading, and store SRC in data-src.

<img data-src="image.jpg" class="lazyload" />
Copy the code

Webp is combined with Lazysizes, just changing the value of data-src in the life-cycle hook function provided by Lazysizes.

Lazybeforeshuffle replaces data-src with SRC before the hook.

document.addEventListener("lazybeforeunveil", function(e) {
    var IMG = e.target;
    var src = IMG.getAttribute("data-src");
    if (window.lvtou_ifSupportWebp) {
      IMG.setAttribute("data-src", src + "?imageMogr2/format/webp");
    }
  });
Copy the code

5.IntersectionObserver

The traditional way to tell if an image is in the viewable area

Listen for the Scroll event, and at scroll,

Compare the offsetTop of the target element to determine

The scroll event is triggered very frequently (throttling is usually done), and retrieving offsetTop will trigger rearrangement, which can easily lead to stall.

IntersectionObserver API can be found at

Without listening for scroll and triggering rearrangement

Determine whether the picture has entered the viewable area. Interested can see ruan yifeng big man’s tutorial

6. Page jitter caused by image loading

. To update..

7. Final results

. .

Finally, our company is holding activities. Those who are interested in photography, couplet culture, and traditional costumes can go to the wechat public account to have a look