MEAN Cookbook

How it works...

Our image optimization pipeline is a two-pass operation. The first pass is the image-maxsize-webpack-loader, which allows us to define, via URL parameters, exactly what the maximum allowed size for a given image should be. When WebPack loads this image, it will be passed over to image-maxsize-webpack-loader, which will use graphicsmagick to resize it using the parsed maximum size options:

background-image: url('../../../assets/images/dots.png?max-width=1200&max-height=600');

If there are no options provided, the default parameters provided on our loader will be used instead:

"image-maxsize-webpack-loader?max-width=800&max-height=600"

The second pass of our image optimization is the imagemin-webpack-plugin, which automatically ...