Implement image optimization

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.

Install image optimization

1. Add the following plugins to the package.json:

2. Install the added plugins:

npm install

Set up image optimization

1. Add 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,
},