1. webp

WebP (pronounced: Weppy) is an image file format that provides both lossy and lossless compression (reversible compression). It is derived from the image encoding format VP8 and is considered a sister project of WebM multimedia format.

Aim: To reduce file size, but achieve JPEG image quality, hopefully reduce the time it takes to send images over the network

2. Webp advantage

WebP greatly reduces the size of images while supporting lossy, lossless and transparent image compression. According to statistics, WebP lossless compression than PNG image volume reduced by 26%, lossy image than similar JPEG image volume reduced by 25%~34%

Webp does not support giFs

compatibility

Global WebP support has reached 95.56%

4. H5 to check whether WebP is supported

• Details please see
  • HTMLCanvasElement.toDataURL()
  • Detect WEBP Support with JavaScript

// Check whether webP is supported
const detectWebpSupport = function () {
    const elem = document.createElement('canvas');
    if (elem.getContext && elem.getContext('2d')) {
        // was able or not to get WebP representation
        return elem.toDataURL('image/webp').indexOf('data:image/webp') = = =0;
    }
    // very old browser like IE 8, canvas not supported
    return false;
};
Copy the code

5. The applet checks whether webP is supported

• Small programs can not be detected through DOM, directly according to the system

function detectWebp() {
  var support = false;

  try {
    var _wx$getSystemInfoSync = wx.getSystemInfoSync(),
        platform = _wx$getSystemInfoSync.platform,
        system = _wx$getSystemInfoSync.system;

    var versionResult = / [0-9] * $/.exec(system);
    var systemVersion = versionResult ? versionResult[0] : ' ';
    var iosSystemSupport = 
        platform === 'ios'&&!!!!! systemVersion && compareVersion(systemVersion,'14.0') > =0;
        
    support = 
        platform === 'devtools' || 
        platform === 'android' || 
        iosSystemSupport;
  } catch (e) {
    console.log(e);
  }

  return support;
}
Copy the code

6. Webp conversion tools

(1) Command line

Conversion tools are available

(2) Visualization

WebP image conversion isparta.github. IO /

7. Use components in React and Vue

Img can be encapsulated

• Do a image to replace components, support format (the original big | | | small) was introduced into

    <image src={url} size={'large'} / >Copy the code

8. Basic processing of Qiniu pictures (format conversion, shortening and quality transformation)

ImageView2 provides quick and easy image format conversion, thumbnail, and quality conversion. You only need to fill in a few parameters, you can perform thumbnail operation on the picture, generate a variety of thumbnails. Picture processing is a charge item, please refer to Charging and Pricing ** for details of charging.

Link: Basic Image processing (imageView2)

9. To summarize

WebP, as a new image format, can not only save traffic, reduce image volume, but also optimize user experience to a certain extent. But also pay attention to compatibility

Reference article:

• Juejin. Cn/post / 684490…