This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

Summary of image optimization processing, including the selection of appropriate image format, image compression, CSS Sprites(Sprite diagram, CSS Sprite), image lazy loading, CSS replacement implementation, Base64 format, iconfont font icon, the use of CDN and so on

preface

Before I wrote an article on front-end performance optimization from 30s to 2s, from the general direction of optimization, mainly the introduction of plug-ins on demand, plus gZIP compression configuration.

This article or optimization of the same system, but from the details of optimization, mainly introduces the picture optimization processing.

Picture optimization scheme

  1. Image format: JPG, PNG, SVG, WebP and so on are commonly used
  2. Image compression: For the definition of the image is not high, can be compressed
    • Tinypng is recommended for manual compression
    • Webpack plug-inimage-webpack-loaderThe compression
  3. CSS Sprites(Sprite, CSS Sprites): Combines multiple small ICONS into one image to reduce the number of HTTP requests. By locating (backround-position) to display the corresponding picture, this is a high requirement for detail
    • Let the UI do it for us, or better yet, if we can do it ourselves
    • webpack-spritesmithThe plug-in
  4. Lazy loading of images
    • For that kind of picture more pages, only show the picture in the visual window, the rest of the scroll to the visual window and then load;
    • Image rotation components can also use lazy loading
    • Lazy loading: The image address is stored in an attribute of the IMG tag, for exampledata-src, when the picture is within the viewable windowsrcProperty is replaced with the image addressdata-srcThe value of the.
    • | MDN Intersection computes the Observer API – Web API interface
    • vue-lazyload
  5. CSS replacement implementation
    • Try to use CSS to achieve images, do not consider cutting images
    • When using CSS3 attributes, try to take them into accountGPU hardware acceleration
  6. Responsive image loading: different resolution devices use different sizes of images, suitable for mobile phones
  7. Base64 format
    • Replace image SRC with Base64 to reduce network requests
    • The image will become larger after base64 encoding, which will increase the size of THE HTML page and affect the loading speed
    • So use this approach wisely, often in Webpackurl-loaderThe use of
  8. Iconfont: Reduces the number of HTTP requests
  9. Use CDN: Some large images can be placed directly on the server to reduce access latency

In actual combat

Before optimization

Image resource 4.6MB, number of images 110:

Imagemin – Webpack-plugin Image compression

According to “analysis before optimization” => “File analysis after Construction”, four pictures are too large and need to be optimized

Because the system needs to support large screen display, generally used pictures are triple, so the pictures are relatively large, need to be reasonably processed.

(1) Configuration code

Easywebpack has some built-in plug-ins, which can be turned on and off with simple configuration. Of course, you can also override the default configuration and customize the configuration

/ / installation
$ npm install imagemin-webpack-plugin --save-dev

/ / configuration webpack. Config. Js
module.exports = {
  plugins: [{// 1. Disable the built-in image compression plugin (imagemin-webpack-plugin), which is enabled by default
      // imagemini: false, 
      
      // 2. You can also customize the configuration
      imagemini: {
        enable: true.env: ["prod"].type: "client".name: "imagemin-webpack-plugin".entry: "default".args: {
          test: /\.(jpe? g|png|gif|svg)$/i,
          optipng: {
            optimizationLevel: 9,},pngquant: {
            // Compress the quality
            quality: "20-30",},},},},],};Copy the code

(2) Configuration comparison

The image resource changed from 4.6MB to 1.7MB, of course my 20-30 configuration is definitely a bit extreme, normally 70-90.

My configuration is so low, there is still a large picture, you can consider to separate processing, first manually compressed, in other processing

Url – loader base64 conversion

Consider using urL-loader to convert small images directly to Base64 format to reduce network requests

(1) Configuration code:

Easywebpack integrates the URL-loader plug-in, which is used by default as follows:

/ / configuration webpack. Config. Js
module.exports = {
  module: {
    rules: [{// 1. The function is disabled by default
        // urlimage: false 
        
        // 2. Custom processing
        urlimage: {
          options: { limit: 1024 * 5 }, If the value is smaller than 5KB, the value is converted to base64},},],},};Copy the code

(2) Configuration comparison

After the configuration, the image resources are changed from 4.6MB to 4.4MB, the images smaller than 5KB are converted to base64, and the number of images is reduced by 60 to 50

At the same time open

Some images are too large before compression and too small after imagemin. If these files are processed with imagemin-webpack-plugin, they will not be converted to Base64 because loader executes before plugin. Url-loader limit compares the size before compression.

If image compression and Base64 conversion are enabled at the same time, the result is only compressed, not converted to Base64

Solution: Use image-webpack-loader instead of imagemin-webpack-plugin

(1) Configuration code:

You need to override the default configuration with the following configuration:

// Install the plug-in
$ npm install image-webpack-loader --save-dev

/ / configuration webpack. Config. Js
module.exports = {
  plugins: [{imagemini: false./ / disable},].module: {
    rules: [{// urlimage: false // Disabled by default
        urlimage: {
          use: [{loader: "url-loader".options: {
                limit: 1024 * 5.// if the value is smaller than 5KB, switch to base64
                fallback: "file-loader".name: `img/[name].[hash:8].[ext]`,}}, {loader: "image-webpack-loader",},],},},],},};Copy the code

(2) Configuration comparison:

Image resources changed from 4.6MB to 2MB, image resources decreased by 57%, the number of images decreased from 110 to 42, a decrease of 68

** This was the most appropriate, and this configuration was eventually used **

Related reference documents

  1. Easywebpack plugin configuration on official website

  2. Official website easywebpack plugin.js source code

  3. Easywebpack Loaders easyWebPack Loaders

  4. Making address imagemin webpack — the plugin

  5. Solution: Use image-webpack-loader instead of imagemin-webpack-plugin

  6. Url-loader configuration document