1. Picture compression upload scheme

Image compression upload, on the premise of lossless image, compress image size, accelerate upload and render speed, improve user experience.

Basic process of compressing pictures

  • Input reads into a file and converts it to Base64 encoding using FileReader
  • Create a new img and make it SRC to point to base64
  • Create a new canvas and draw IMG onto the canvas
  • Export canvas as Base64 or Blob using Canvas. toDataURL/toBlob
  • Convert Base64 or Blob to File

Breaking down these steps one by one, it seems that image quality is involved in canvas.todataURL, so let’s start there.

Key knowledge points

HTMLCanvasElement.toDataURL()

MDN: HTMLCanvasElement. ToDataURL ()

HTMLCanvasElement. ToDataURL () method returns a data URI contains pictures show. You can use the type parameter, which is PNG by default. The image resolution is 96dpi.

  • If the height or width of the canvas is 0, the string “data:,” is returned.
  • If the type passed is not “image/ PNG”, but the value returned begins with “data:image/ PNG”, the type passed is not supported.
  • Chrome supports the image/ Webp type.

grammar

canvas.toDataURL(type, encoderOptions);

parameter

  • type optional

The default image format is image/ PNG

  • encoderOptions optional

When you specify image format as Image/JPEG or image/webp, you can select the image quality from 0 to 1. If the value is out of range, the default value 0.92 will be used. Other parameters are ignored.

The return value

DOMString that contains the data URI.

methods

The default image is usually of higher quality than the original image. When the quality is between 0.2 and 0.5, the picture quality does not change much. The smaller the quality is, the more significant the compression efficiency will be (that is, when the quality is around 0.2, the compressed picture can be maximized without too much influence on the picture quality).

Two, picture high performance loading scheme

The H5 page, which contains a large number of image materials, should be presented to users at least until the first screen is loaded. To increase the loading speed, on the one hand, the response speed of the request should be fast enough, on the other hand, the amount of data transferred should be minimized. It is recommended that the image file size on your website should not exceed 500 KB

From the appeal of high definition, high compression ratio and small volume, we finally choose WebP as the preferred image file format.

Why webP

WebP is a picture format developed by Google with advanced lossless compression algorithm. Its main characteristics are: high compression rate, support transparent channel, support GIF. According to WebP official website, under the condition of the same image quality, WebP lossless compression image file size is 26% smaller than the corresponding PNG image, lossless compression image than the corresponding JPEG image 25 ~ 34% smaller.

Lossless WebP also supports transparency. While lossy WebP also supports transparency when lossy RGB compression is acceptable, PNG files are usually three times larger.

Google reported a 64% reduction in file size after converting animated GIFs to lossy WebP and a 19% reduction in file size after converting lossy WebP.

WebP file format is a document format based on RIFF (Resource Interchange File Format).

Using WebP for lossy compression of images, under the default configuration of 75% compression ratio, PNG image size can be compressed to about 13% of the original image volume, JPG image can even be compressed to about 10% of the original image volume (please refer to the official test page), the actual effect is remarkable.

Compared with other compressed images of the same size and different formats, WebP images have smaller volume and higher quality, which has obvious advantages.

Webp solution

  • Determine whether the host environment supports WebP

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
  • Generate webP images

NODE generation: call image transformation library to generate corresponding WebP images or use webpack corresponding loader to generate front-end transcoding processing

  • CSS background images introduce WebP

Set up the root webPA class to handle image import in CSS

  • How do images come into HTML

JS determines how to dynamically change image URLS

This paper mainly refers to the front-end image optimization compression scheme based on WebP image high performance loading scheme