image-webpack-loader
Advanced tools
Image loader module for webpack
Minify PNG, JPEG, GIF and SVG images with imagemin
Issues with the output should be reported on the imagemin issue tracker.
$ npm install image-webpack-loader --save-dev
In your webpack.config.js, add the image-loader, chained with the file-loader:
loaders: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
If you want to use pngquant or mozjpeg you must use the json options notation like this:
loaders: [
{
test: /.*\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?{optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'
]
}
];
You can also use a configuration section in your webpack config to set global options for the loader, which will apply to all loader sections that use the image loader.
{
module: {
loaders: [
{
test: /.*\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack'
]
}
]
},
imageWebpackLoader: {
mozjpeg: {
quality: 65
},
pngquant:{
quality: "65-90",
speed: 4
},
svgo:{
plugins: [
{
removeViewBox: false
},
{
removeEmptyAttrs: false
}
]
}
}
}
Comes bundled with the following optimizers:
Unsupported files are ignored.
Options are applied to the correct files.
Type: number
Default: 3
Select an optimization level between 0 and 7.
The optimization level 0 enables a set of optimization operations that require minimal effort. There will be no changes to image attributes like bit depth or color type, and no recompression of existing IDAT datastreams. The optimization level 1 enables a single IDAT compression trial. The trial chosen is what. OptiPNG thinks it’s probably the most effective. The optimization levels 2 and higher enable multiple IDAT compression trials; the higher the level, the more trials.
Level and trials:
Returns a promise for a buffer.
Type: number
Compression quality. Min and max are numbers in range 0 (worst) to 100 (perfect).
Type: boolean
Default: true
false creates baseline JPEG file.
Type: boolean
Default: false
Interlace gif for progressive rendering.
Type: object
Default: {}
Pass options to svgo.
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 oprimized files.
Type: number
Default: 0.5
Controls level of dithering (0 = none, 1 = full).
Type: boolean
Default: false
Disable Floyd-Steinberg dithering.
Type: number
Reduce precision of the palette by number of bits. Use when the image will be displayed on low-depth screens (e.g. 16-bit displays or compressed textures).
Type: string
Instructs pngquant to use the least amount of colors required to meet or exceed the max quality. If conversion results in quality below the min quality the image won't be saved.
Min and max are numbers in range 0 (worst) to 100 (perfect), similar to JPEG.
Type: number
Default: 3
Speed/quality trade-off from 1 (brute-force) to 10 (fastest). Speed 10 has
5% lower quality, but is 8 times faster than the default.
Type: boolean
Default: false
Print verbose status messages.
[3.0.0] - 2016-10-16
loader-utils, imagemin-gifsicle, imagemin-optipng, imagemin-svgo, webpackFAQs
Image loader module for webpack
The npm package image-webpack-loader receives a total of 111,626 weekly downloads. As such, image-webpack-loader popularity was classified as popular.
We found that image-webpack-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.