Images optimization usage

The imagemin plugin is a npm package that compresses a particular image format. For example, mozjpeg compresses JPEG files. Popular image formats may have multiple plugins to choose from.

Prerequisites

Add the following plugins to the package.json and install them using the npm install command:

Use Images optimization

1. Add a new commands to the package.json scripts:

"yves:images-optimization": "node ./frontend/libs/images-optimization-build"
"yves:images-optimization:replace": "node ./frontend/libs/images-optimization-build --replace",

2. Create the folder with optimized images (project/frontend/assets/%namespace%/%theme%/images/optimized-images):

npm run yves:images-optimization

3. Replace original images with optimized ones:

npm run yves:images-optimization:replace

If you set the mode value to true—for example, production: true—when you run npm run yves:production, the build is executed with optimized images by default, and they are added to the public folder.

frontend/settings.js

enabledInModes: {
    'development': false,
    'development-watch': false,
    'production': true,
},