Since we are only working with .png files in this example, we are using the popular pngquant lossy png optimizer. For the context of our blog post cover image, this approach gives us a great image compression and quality trade-off. However, there are many different contexts for how you may want to optimize your images. Different image compressors make different trade-offs when it comes to image file types, quality, and file size. The imagemin-webpack-plugin supports a wide range of different image compression plugins you may be interested in using instead, based on the needs of your application. As long as the image compression plugin uses the imagemin plugin standard, it is compatible with imagemin-webpack-plugin.
Plugin Name | Description | Additional Materials |
imagemin-pngquant | A lossy PNG compressor with an excellent file compression and alpha transparency support | https://pngquant.org/ |
imagemin-mozjpeg | A lossy JPG compressor with an excellent quality and file size balance through use of trellis quantization | https://research.mozilla.org/2014/03/05/introducing-the-mozjpeg-project/ |
imagemin-svgo | A Node.js-based SVG optimizer with a plugin-based architecture | https://github.com/svg/svgo#what-it-can-do |
imagemin-gifsicle | A lossless GIF manipulation library that allows optimization of animated GIFs through use of Lempel-Ziv-Welch compression algorithm | https://github.com/kohler/gifsicle |
imagemin-optipng | A lossless PNG compressor | http://optipng.sourceforge.net/pngtech/optipng.html |
imagemin-jpegtran | A lossless JPG compressor | http://jpegclub.org/jpegtran/ |
imagemin-jpeg-recompress | A lossy JPG compressor that re-encodes to the smallest JPEG file size while keeping perceived visual quality through use of optimized huffman tables | https://github.com/danielgtaylor/jpeg-archive#jpeg-recompress |
imagemin-webp | Converts JPG and PNG files into the much more efficient WEBP format | https://developers.google.com/speed/webp/ |
imagemin-jpegoptim | A JPG optimizer that provides lossless and lossy optimization based on setting maximum quality factor | https://github.com/tjko/jpegoptim |
imagemin-pngcrush | A PNG optimizer that focuses on reducing the size of the PNG IDAT datastream by trying various compression levels and PNG filter methods | https://pmt.sourceforge.io/pngcrush/ |
imagemin-zopfli | A generic image optimizer that applies zopfli deflate compression to an asset | https://github.com/google/zopfli |
imagemin-giflossy | A fork of Gifsicle with a lossy compression option | https://github.com/pornel/giflossy |
imagemin-gm | A Node.js utility for using GraphicsMagick directly to manipulate images | http://www.graphicsmagick.org/ |
imagemin-pngout | A lossless PNG compressor that uses a custom deflate compressor | http://advsys.net/ken/utils.htm |
imagemin-guetzli | A perceptual JPG compressor with compression density at high visual quality | https://github.com/google/guetzli |
imagemin-advpng | A PNG re-compressor designed for use with the AdvanceMAME emulator | http://www.advancemame.it/doc-advpng.html |
imagemin-pngquant-gfw | A fork of imagemin-pngquant optimized for working within China's great firewall | https://github.com/anhulife/imagemin-pngquant-gfw |
imagemin-jpegtran-gfw | A fork of imagemin-jpegtran optimized for working within China's great firewall | https://github.com/anhulife/imagemin-jpegtran-gfw |
imagemin-gif2webp | A utility for converting GIF files to the more efficient WEBP format | https://developers.google.com/speed/webp/docs/gif2webp |
You can find more information about these and other imagemin plugins by searching for imageminplugin query within the npmjs.com website:
https://www.npmjs.com/browse/keyword/imageminplugin
https://www.npmjs.com/browse/keyword/imageminplugin