Webpack optimizes/compresses images to reduce packaging volume by 80%

When I took over a new project team and saw the volume of the vUE project packaged by my colleague was more than 40 meters, even the back end began to question it, I couldn’t sit still and looked at the structure, mainly because the pictures of more than 40 meters occupied the resources.

So I advised him to go to the Internet to manually compress pictures, but after all, there are dozens of pictures, one manual upload is very time-consuming, batch upload is estimated to hit members (manual dog head), then I thought of some plug-ins of VUE. Found that open source plug-ins do not fully support all types of image compression, so there are several types of image compression.

1. The PNG (PNG – 8 and PNG – 24)

Advantages and Disadvantages of PNG

PNG (Portable Network Graphics Format) is a lossless compression image format with high fidelity. 8 and 24, these are the bits of binary numbers. According to the corresponding relationship mentioned in our previous knowledge, 8-bit PNG can support up to 256 colors, while 24-bit PNG can present about 16 million colors.

PNG images have stronger color expression than JPG, more delicate processing of lines, and good support for transparency. It makes up for the limitations of the JPG we mentioned above, the only drawback being that it’s too big.

PNG Application Scenario

As mentioned above, the cost of processing complex and colorful images with PNG will be relatively high, so we usually hand over JPG to store them.

Considering PNG’s advantages in handling lines and color contrast, we mainly use it for small logos, simple and contrasting images or backgrounds, etc.

PNG image optimization using PngQuant

Pngquant is my preferred tool for optimizing PNG images. You can use it with Imagemin-pngQuant:

NPM install imagemin-pngquant then add the following to the imagemin.js file:

const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');
const input = './src/assets/images'
const target = './build/images'
(async() = > {await imagemin([input], {
        destination: target,
        plugins: [
            imageminPngquant({ quality: [0.65.0.8]]}}));console.log('Images optimized'); }) ();Copy the code

Perform the node imagemin. Js

I found that setting the quality to 65-80 was a good compromise between file size and image quality.

2.JPEG/JPG

The biggest feature of JPG is lossy compression. This efficient compression algorithm makes it a very lightweight image format. On the other hand, even though it is called “lossy” compression, JPG compression is still a high quality compression: when we compress an image to less than 50% of its original volume, JPG still retains 60% of its quality. In addition, THE JPG format stores a single image in 24 bits and can present as many as 16 million colors, enough to handle the color requirements of most scenarios, which means that the mass loss before and after compression is not easily noticeable to our human eyes — assuming you use the right business scenario.

JPG is great for rendering colorful images. In our daily development, JPG images often appear as large backgrounds, rotating images, or banners.

Lossy compression is hard to spot on the rote images shown above, but when it works with linear, color contrast images such as vector graphics and logos, the resulting blur can be quite noticeable.

In addition, JPEG images do not support transparency processing, and transparent images need to be rendered in PNG.

Compress JPEG using MozJPEG

Mozilla’s MozJPEG tool is used here, which can be used as an Imagemin plug-in through Imagemin-Mozjpeg. You can install it by running the following command:

NPM install Imagemin-mozjpeg and add the following to imagemin.js:

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const input =  './src/assets/images/preview';
const destination = './build/images'
(async() = > {await imagemin([input],  {
        destination: destination ,
        plugins: [
            imageminMozjpeg({quality:70]}}));console.log('Images optimized'); }) ();Copy the code

You can run the script by running Node Imagemin.js on the terminal. This will process all JPEG images and place the optimized versions in the Build/Images folder.

I have found that setting the quality to 70 will produce a clear enough image in most cases, but your project needs may be different and you can set the appropriate value yourself.

By default, MozJPEG generates progressive JPeGs, which cause images to gradually load from low resolution to high resolution until the image is fully loaded. They are also slightly smaller than the original JPEGs because of the way they are encoded.

You can use this command line tool from Sindre Sorhus to check if JPEG images are progressive.

The pros and cons of using progressive JPEG have been well summarized by Addy Osmani. For me, I think the pros outweigh the cons, so I stick with the default Settings.

Put it all together

const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant'); // Optimize the PNG image
const imageminMozjpeg = require('imagemin-mozjpeg');
const input =  './src/assets/images';
const destination = './build/images';

(async() = > {await imagemin([input], {
        destination: destination,
        plugins: [
            imageminPngquant({ quality: [0.65.0.8].speed:11.dithering:0.5]}}));await imagemin([destination + '/*.jpg'] and {destination: destination,
        plugins: [
            imageminMozjpeg({quality:45]}}));console.log('Images optimized'); }) ();Copy the code

The volume becomes 7M

Refer to the article: www.cnblogs.com/fundebug/p/…

www.npmjs.com/package/ima…

www.npmjs.com/package/ima…