Success! You have used Imagemin to optimally compress the images on your page. Run the Lighthouse performance audit ( Lighthouse > Options > Performance) on the live version of your Glitch and verify that the Efficiently encode images audit was passed.Lighthouse's 'Efficiently encode images' performance audit can let you know if the JPEG images on your page are optimally compressed.

This is why it's always a good idea to use Lighthouse to verify your changes.

Webpack warns you about large images, but it can't tell you if images are uncompressed or undercompressed. Hooray! Your changes should have fixed the webpack warnings.

In the console, re-run webpack: webpack -config -mode production.

Customize your Imagemin Configuration #ДЄdd settings for compressing PNG images by passing the following object to ImageminPlugin(): Re-run webpack and verify results with Lighthouse # (webpack's development & production modes prioritize different things, which is why you only see this warning while running webpack in production mode.)Д¬ustomize our Imagemin configuration to fix this warning.

This time around, webpack displays a warning letting you know that your PNG files, in spite of some compression, still exceed the recommended size limit.

Re-run webpack, but this time in production mode: webpack -config -mode production.

To compress your images, run webpack by typing the following command into the console: webpack -config -mode developmentД«ut what happens if you run webpack in production mode?.

You now have a webpack config that compresses images using Imagemin. default Д¬onst CopyWebpackPlugin = require ( 'copy-webpack-plugin' ) Your complete file should now look like this: const ImageminPlugin = require ( 'imagemin-webpack-plugin' ).

Why add it at the end of the array? Adding it there ensures that Imagemin runs last, after all the other plugins.

How to run webpack in production