Image Webpack Loader

Image loader module for webpack
Alternatives To Image Webpack Loader
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Imageoptim Cli3,3079618a month ago49November 13, 20211mitTypeScript
Make optimisation of images part of your automated build process
Image Webpack Loader2,0348,8372,07714 days ago43January 11, 202281mitJavaScript
Image loader module for webpack
Automator Workflows452
a year agomitShell
A collection of Automator workflows (services) that speed up your design / development process. Compatible with LaunchBar 6 and 7 Actions
Caesium Clt213
3 months ago4otherRust
Caesium Command Line Tools - Lossy/lossless image compression tool
2 months ago7November 11, 20203apache-2.0C# core middleware to send compressed static files to the browser without having to compress on demand, also has support for sending more advanced image formats when the browser indicates that i has support for it.
Image Optimize Loader49
3 years ago8August 04, 2020mitJavaScript
Image webpack loader. Minify image, compress image, encode image(eg: base64) and inline image automaticlly. Support PNG, JPG, JPEG, GIF, WEBP, SVG.
Hexo Minify26
2 months agoTypeScript
Hexo-minify is a Hexo compression plug-in that compresses HTML, CSS, JS, Font and Image(jpg,png,gif,webp,svg) (Hexo-minify 是一款 Hexo 压缩插件,它可以压缩 HTML、CSS、JS、Font、Image(jpg,png,gif,webp,svg))
Shortpixel Image Optimiser16
a month ago3PHP
ShortPixel Image Optimizer WordPress Plugin
Roots Image Pipeline14
57 years ago12February 23, 20164otherCoffeeScript
Image pipeline plugin for Roots (
Image Resize Compress6
4 months ago1mitJavaScript
image-resize-compress is a library that allows you to compress, resize or convert an image without any extra dependency
Alternatives To Image Webpack Loader
Select To Compare

Alternative Project Comparisons

Dependencies status devDependencies status Build status


please use:


Image loader module for webpack

Minify PNG, JPEG, GIF, SVG and WEBP images with imagemin

Issues with the output should be reported on the imagemin issue tracker.


$ npm install image-webpack-loader --save-dev

Install in container


No additional preparations required. All dependencies will be compiled automatically.
Not recommended because of large image size (~1 GB).


Prepare script:

apt-get update
apt-get install -y --no-install-recommends autoconf automake g++ libpng-dev make

Recommended container image.


Prepare script:

apk add --no-cache autoconf automake file g++ libtool make nasm libpng-dev

Not recommended because of long build time.


Container distro Pull time Build time Total time
node:12-buster 42 seconds 77 seconds 119 seconds
node:12-buster-slim 11 seconds 103 seconds 114 seconds
node:12-alpine 8 seconds 122 seconds 130 seconds

libpng issues

Installing on some versions of OSX may raise errors with a missing libpng dependency:

Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib

This can be remedied by installing the newest version of libpng with homebrew:

brew install libpng


Documentation: Using loaders

In your webpack.config.js, add the image-loader, chained after the file-loader:

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, // [email protected]
        disable: true, // [email protected] and newer

For each optimizer you wish to configure, specify the corresponding key in options:

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        gifsicle: {
          interlaced: false,
        // the webp option will enable WEBP
        webp: {
          quality: 75

Comes bundled with the following optimizers, which are automatically enabled by default:

And optional optimizers:

  • webpCompress JPG & PNG images into WEBP

Each optimizers can be disabled by specifying optimizer.enabled: false, and optional ones can be enabled by simply putting them in the options

If you are using Webpack 1, take a look at the old docs (or consider upgrading).


Loader options:

bypassOnDebug (all)

Type: boolean Default: false

Using this, no processing is done when webpack 'debug' mode is used and the loader acts as a regular file-loader. Use this to speed up initial and, to a lesser extent, subsequent compilations while developing or using webpack-dev-server. Normal builds are processed normally, outputting optimized files.


Type: boolean Default false

Same functionality as bypassOnDebug option, but doesn't depend on webpack debug mode, which was deprecated in 2.x. Basically you want to use this option if you're running [email protected] or newer.

For optimizer options, an up-to-date and exhaustive list is available on each optimizer repository:




Popular Compress Projects
Popular Webp Projects
Popular Software Performance Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.