Imagemin app

Author: c | 2025-04-24

imagemin as an OS X, Linux and Windows app use electron - imagemin-app/yarn.lock at master zengde/imagemin-app

imagemin-app/license at main imagemin/imagemin-app

📦📦 unplugin Imagemin Picture compression✨✨ Continuous iterative development in testing [102.54 KB]✔ : Process start with mode squoosh✅ : [test2.png] [16.38 MB] -> [76.79 KB]">✨ : unplugin-imagemin✔ : Process start with mode squoosh✅ : [test1.png] [12.39 MB] -> [102.54 KB]✔ : Process start with mode squoosh✅ : [test2.png] [16.38 MB] -> [76.79 KB]🌈 Features🍰 Support png jpeg webp avif svg tiff Format🦾 High Performance based on squoosh✨ Multiple picture formats can be configured🪐 Compress the code at build time😃 Caching Mechanism Tips: TODO🌈 You can convert different picture types at build timeSquoosh && Sharp && SvgoUnplugin-imagemin supports two compression modesSharp The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions.Squoosh is an image compression web app that reduces image sizes through numerous formats.Squoosh with rust & wasmSvgo Support compression of pictures in svg format✨WarningAlthough squoosh has done a good job, there will be all kinds of problems in future node versions, so don't use squoosh mode for the time being.Due to the loading problem of squoosh, unplugin-imagmin currently only supports versions below node 18.Due to the rapid update of vite version and squoosh stop maintenance and other unstable factorsIt is recommended that mode choose sharp.🍰 Effect display iShot_2023-09-18_16.41.04.mp4 📦 Installationpnpm add unplugin-imagemin@latest -Dsupport vite and rollup.Basicimport { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import imagemin from 'unplugin-imagemin/vite';// default defineConfig({ plugins: [vue(), imagemin()],});Advancediimport { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import imagemin from 'unplugin-imagemin/vite';import path from 'path';// default defineConfig({ plugins: [ vue(), imagemin({ // Default mode sharp. support squoosh and sharp mode: 'squoosh', beforeBundle: true, // Default configuration options for compressing different pictures compress: { jpg: { quality: 10, }, jpeg: { quality: 10, }, png: { quality: 10, }, webp: { quality: 10, }, }, conversion: [ { from: 'jpeg', to: 'webp' }, { from: 'png', to: 'webp' }, { from: 'JPG', to: 'jpeg' }, ], }), ],});🌸 DefaultConfigurationSquoosh DefaultConfiguration and sharp DefaultConfigurationDefaultConfiguration see DefaultConfigurationPlugin property configuration see configurationexport interface PluginOptions { /** * @description Picture compilation and conversion * @default [] */ conversion?: ConversionItemType[]; /** * @description Whether to turn on caching * @default true */ cache?: boolean; /** * @description Cache folder directory read * @default node_modules/unplugin-imagemin/cache * */ cacheDir?: string; /** * @description Compilation attribute * @default CompressTypeOptions */ compress?: CompressTypeOptions; /** * @description mode * @default squoosh * @description squoosh or sharp */ mode?: 'squoosh' | 'sharp'; /** * @description Whether to compress before packing * @default false */ beforeBundle?: boolean;} | FunctionDefault: undefinedAllows to set the filename.Supported values see in webpack template strings, File-level section.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ generator: [ { preset: "name", filename: "generated-[name][ext]", implementation: ImageMinimizerPlugin.squooshMinify, // Options options: { encodeOptions: { mozjpeg: { quality: 90, }, }, }, }, ], }), ], },};Example of Function usage:webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ generator: [ { preset: "name", filename: () => "generated-[name][ext]", implementation: ImageMinimizerPlugin.squooshMinify, // Options options: { encodeOptions: { mozjpeg: { quality: 90, }, }, }, }, ], }), ], },};severityErrorType: StringDefault: 'error'Allows to choose how errors are displayed.Сan have the following values:'off' - suppresses errors and warnings'warning' - emit warnings instead errors'error' - emit errorswebpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ severityError: "warning", minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, }), ], },};loaderType: BooleanDefault: trueAutomatically adding built-in loader, used to optimize/generate images.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ loader: false, // `generator` will not work in this case minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, }), ], },};concurrencyType: NumberDefault: Math.max(1, os.cpus().length - 1)Maximum number of concurrency optimization processes in one time.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ concurrency: 3, minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, }), ], },};deleteOriginalAssetsType: BooleanDefault: trueAllows removing original assets after optimization.Please use this option if you are set the filename option for the minimizer option, disable loader: false and want to keep optimized and not optimized assets.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ // Disable loader loader: false, // Allows to keep original asset and minimized assets with different filenames deleteOriginalAssets: false, minimizer: { filename: "[path][name].webp", implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, }), ], },};Loader OptionsNameTypeDefaultDescriptionminimizer{Object | Array}undefinedAllows to setup default minimizergenerator{Array}undefinedAllows to setup default generatorseverityError{String}'error'Allows to choose how errors are displayedseverityErrorType: StringDefault: 'error'Allows to choose how errors are displayed.Сan have the following values:'off' - suppresses errors and warnings'warning' - emit warnings instead errors'error' - emit errorswebpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: ImageMinimizerPlugin.loader, options: {

imagemin-app/.editorconfig at main imagemin/imagemin-app

3.0.0 • Public • Published 3 years ago ReadmeCode Beta2 Dependencies85 Dependents31 Versions Imagemin Webpack Plugin and Loader for webpack to optimize (compress) all images using imagemin. Do not worry about size of images, now they are always optimized/compressed. image-minimizer-webpack-pluginGetting StartedThis plugin can use 2 tools to optimize/generate images:imagemin - optimize your images by default, since it is stable and works with all types of imagessquoosh - while working in experimental mode with .jpg, .jpeg, .png, .webp, .avif file types.⚠️ By default we don't install anythingTo begin, you'll need to install image-minimizer-webpack-plugin and image minimizer/generator:imagemin:$ npm install image-minimizer-webpack-plugin imagemin --save-dev⚠️ imagemin uses plugin to optimize/generate images, so you need to isntall them toosquoosh:$ npm install image-minimizer-webpack-plugin @squoosh/lib --save-devImages can be optimized in two modes:Lossless (without loss of quality).Lossy (with loss of quality).Note:imagemin-mozjpeg can be configured in lossless and lossy mode.imagemin-svgo can be configured in lossless and lossy mode.Explore the options to get the best result for you.Recommended imagemin plugins for lossless optimizationnpm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-devRecommended imagemin plugins for lossy optimizationnpm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-devFor imagemin-svgo v9.0.0+ need use svgo configurationwebpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");const { extendDefaultPlugins } = require("svgo");module.exports = { module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", }, ], }, optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { // Lossless optimization with custom option // Feel free to experiment with options for better result for you plugins: [ ["gifsicle", { interlaced: true }], ["jpegtran", { progressive: true }], ["optipng", { optimizationLevel: 5 }], // Svgo configuration here [ "svgo", { plugins: extendDefaultPlugins([ { name: "removeViewBox", active: false, }, { name: "addAttributesToSVGElement", params: { attributes: [{ xmlns: " }], }, }, ]), }, ], ], }, }, }), ], },};$ npm install @squoosh/lib --save-devRecommended @squoosh/lib options for lossy optimizationFor lossy optimization we recommend using the default settings of @squoosh/lib package.The default values and supported file types for each option can be found in the codecs.ts file under codecs.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { module: { rules: [ // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it { test: /\.(jpe?g|png)$/i, type: "asset", }, ], }, optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.squooshMinify, options: { // Your options for `squoosh` }, }, }), ], },};Recommended squoosh options for lossless optimizationFor lossless optimization we recommend using the. imagemin as an OS X, Linux and Windows app use electron - imagemin-app/yarn.lock at master zengde/imagemin-app imagemin as an OS X, Linux and Windows app use electron - imagemin-app/yarn.lock at master zengde/imagemin-app

imagemin-app/.gitignore at main imagemin/imagemin-app

SeverityError: "warning", minimizerOptions: { plugins: ["gifsicle"], }, }, }, ], }, ], },};minimizerType: Object|ArrayDefault: undefinedAllows to setup default minimizer.Objectwebpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", }, { test: /\.(jpe?g|png|gif|svg)$/i, loader: ImageMinimizerPlugin.loader, enforce: "pre", options: { minimizer: { implementation: ImageMinimizerPlugin.squooshMinify, options: { // Your options }, }, }, }, ], },};For more information and supported options please read here.generatorType: ArrayDefault: undefinedAllow to setup default generators.Useful if you need generate webp/avif/etc from other formats.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", }, { test: /\.(jpe?g|png|gif|svg)$/i, loader: ImageMinimizerPlugin.loader, enforce: "pre", options: { generator: [ { preset: "webp", implementation: ImageMinimizerPlugin.imageminGenerate, options: { plugins: ["iamgemin-webp"], }, }, ], }, }, ], },};For more information and supported options please read here.Additional APIimageminNormalizeConfig(config)The function normalizes configuration (converts plugins names and options to Functions) for using in imagemin package directly.const imagemin = require("imagemin");const { imageminNormalizeConfig } = require("image-minimizer-webpack-plugin");/* console.log(imageminConfig); => { plugins: [Function, Function], pluginsMeta: [ { name: "imagemin-jpegtran", version: "x.x.x", options: {} }, { name: "imagemin-pngquant", version: "x.x.x", options: { quality: [0.6, 0.8] } ] }*/(async () => { const imageminConfig = await imageminNormalizeConfig({ plugins: ["jpegtran", ["pngquant", { quality: [0.6, 0.8] }]], }); const files = await imagemin(["images/*.{jpg,png}"], { destination: "build/images", plugins: imageminConfig.plugins, }); console.log(files); // => [{data: , path: 'build/images/foo.jpg'}, …]})();ExamplesOptimize images based on sizeYou can use difference options (like progressive/interlaced/etc.) based on image size (example - don't do progressive transformation for small images).What is progressive image? Answer here.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [["jpegtran", { progressive: true }]], }, // Only apply this one to files equal to or over 8192 bytes filter: (source) => { if (source.byteLength >= 8192) { return true; } return false; }, }, }), new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [["jpegtran", { progressive: false }]], }, // Only apply this one to files under 8192 filter: (source) => { if (source.byteLength 8192) { return true; } return false; }, }, }), ], },};Optimize and generate webp imagesimageminwebpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, generator: [ { // You can apply generator using `?as=webp`, you can use any name and provide more options preset: "webp", implementation: ImageMinimizerPlugin.imageminGenerate, options: { ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ test: /\.(jpe?g|png|gif|svg)$/i, }), ], },};includeType: String|RegExp|ArrayDefault: undefinedFiles to include.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ include: /\/includes/, }), ], },};excludeType: String|RegExp|ArrayDefault: undefinedFiles to exclude.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ exclude: /\/excludes/, }), ], },};minimizerType: Object|ArrayDefault: undefinedAllows to setup default minify function.Available minimizers:ImageMinimizerPlugin.imageminMinifyImageMinimizerPlugin.squooshMinifyObjectFor imagemin:webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { // Implementation implementation: ImageMinimizerPlugin.imageminMinify, // Options options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, }), ], },};More information and examples here.For squoosh:webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { // Implementation implementation: ImageMinimizerPlugin.squooshMinify, // Options options: { encodeOptions: { mozjpeg: { quality: 90, }, }, }, }, }), ], },};More information and examples here.Minimizer option list:implementationType: FunctionDefault: undefinedConfigure the default implementation.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { // Implementation implementation: ImageMinimizerPlugin.squooshMinify, }, }), ], },};optionsType: ObjectDefault: undefinedOptions for the implementation option (i.e. options for imagemin/squoosh/custom implementation).webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.squooshMinify, // Options options: { encodeOptions: { mozjpeg: { quality: 90, }, }, }, }, }), ], },};filterType: FunctionDefault: () => trueAllows filtering of images for optimization/generation.Return true to optimize the image, false otherwise.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { filter: (source, sourcePath) => { // The `source` argument is a `Buffer` of source file // The `sourcePath` argument is an absolute path to source if (source.byteLength 8192) { return false; } return true; }, implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, }), ], },};filenameType: string | FunctionDefault: undefinedAllows to set the filename.Supported values see in webpack template strings, File-level section.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { filename: "optimized-[name][ext]", implementation: ImageMinimizerPlugin.squooshMinify, // Options options: { encodeOptions: { mozjpeg: { quality: 90, }, }, }, }, }), ], },};Example Function usage:webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization: { minimizer: [ "...", new ImageMinimizerPlugin({ minimizer: { filename: () => "optimized-[name][ext]", implementation: ImageMinimizerPlugin.squooshMinify, // Options options: { encodeOptions: { mozjpeg: { quality: 90, }, }, }, }, }), ], },};ArrayAllows to setup multiple minimizers.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { optimization:

Repository of GitHub - imagemin/imagemin-app: imagemin as an

A minute. When finished, open your text editor and create a new file named webp.js in your web project’s root folder.Type the script below into the file (updated for modern node by Luke Berry):EDIT: Both of these snippets applied to earlier versions of imagemin-webp. Recently, this tool has been updated to use native ESM in 7.0. Consult the README for implementation. You may need to replace require() with import. And specify type: module in your package.json. Original Script var imagemin = require("imagemin"), // The imagemin module. webp = require("imagemin-webp"), // imagemin's WebP plugin. outputFolder = "./img", // Output folder PNGImages = "./img/*.png", // PNG images JPEGImages = "./img/*.jpg"; // JPEG imagesimagemin([PNGImages], outputFolder, { plugins: [webp({ lossless: true // Losslessly encode images })]});imagemin([JPEGImages], outputFolder, { plugins: [webp({ quality: 65 // Quality setting from 0 to 100 })]});const imagemin = require('imagemin'), webp = require('imagemin-webp')const outputFolder = './images/webp'const produceWebP = async () => { await imagemin(['images/*.png'], { destination: outputFolder, plugins: [ webp({ lossless: true }) ] }) console.log('PNGs processed') await imagemin(['images/*.{jpg,jpeg}'], { destination: outputFolder, plugins: [ webp({ quality: 65 }) ] }) console.log('JPGs and JPEGs processed')}produceWebP()This script will process all JPEG and PNG images in the img folder and convert them to WebP. When converting PNG images, we set the lossless option to true. When converting JPEG images, we set the quality option to 65. Feel free to experiment with these settings to get different results. You can experiment with even more settings at the imagemin-webp plugin page.This script assumes that all of your JPEG and PNG images are in a folder named img. If this isn’t the case, you can change the values of the PNGImages and JPEGImages variables. This script also assumes you want the WebP output to go into the img folder. If you don’t want that, change the value of the outputFolder variable to whatever you need. Once you’re ready, run the script like so:node webp.jsThis will process all of the images, and dump their WebP counterparts into the img folder. The benefits you realize will depend on the images you’re converting. In my case, a folder with JPEGs totaling roughly 2.75 MB was trimmed down to 1.04 MB without any perceptible loss in visual quality. That’s a 62% reduction without much effort! Now that all of your images are converted, you’re ready to start using them. Let’s jump in and put them to use!Using WebP in HTMLUsing a WebP image in HTML is like using any other kind of image, right? Just slap that sucker into the tag’s src attribute and away you go!This will work great, but only for browsers that support it. Woe betide those unlucky users who wander by your site when all you’re using is WebP:WHAT HAPPENEDIt sucks, sure, but that’s just the way front end development is, so buck up. Some features just aren’t going to work in every browser, and that’s not going to change anytime soon. The easiest way we can make this work is to use the element to specify

imagemin-app/media/screenshot.png at main imagemin/imagemin-app

Imagemin-webp WebP imagemin pluginInstallnpm install imagemin-webpUsageimport imagemin from 'imagemin';import imageminWebp from 'imagemin-webp';await imagemin(['images/*.{jpg,png}'], { destination: 'build/images', plugins: [ imageminWebp({quality: 50}) ]});console.log('Images optimized');APIimageminWebp(options?)(buffer)Returns a Promise with the optimized image.optionsType: objectpresetType: stringDefault: defaultPreset setting, one of default, photo, picture, drawing, icon and text.qualityType: numberDefault: 75Set quality factor between 0 and 100.alphaQualityType: numberDefault: 100Set transparency-compression quality between 0 and 100.methodType: numberDefault: 4Specify the compression method to use, between 0 (fastest) and 6 (slowest). This parameter controls the trade off between encoding speed and the compressed file size and quality.sizeType: numberSet target size in bytes.snsType: numberDefault: 50Set the amplitude of spatial noise shaping between 0 and 100.filterType: numberSet deblocking filter strength between 0 (off) and 100.autoFilterType: booleanDefault: falseAdjust filter strength automatically.sharpnessType: numberDefault: 0Set filter sharpness between 0 (sharpest) and 7 (least sharp).losslessType: boolean | numberDefault: falseEncode images losslessly. If set to a number, activates lossless preset with given level between 0 (fastest, larger files) and 9 (slowest, smaller files).nearLosslessType: numberDefault: 100Encode losslessly with an additional lossy pre-processing step, with a quality factor between 0 (maximum pre-processing) and 100 (same as lossless).cropType: object { x: number, y: number, width: number, height: number }Crop the image.resizeType: object { width: number, height: number }Resize the image. Happens after crop.metadataType: string | string[]Default: noneValues: all none exif icc xmpA list of metadata to copy from the input to the output if present.bufferType: BufferBuffer to optimize.. imagemin as an OS X, Linux and Windows app use electron - imagemin-app/yarn.lock at master zengde/imagemin-app imagemin as an OS X, Linux and Windows app use electron - imagemin-app/yarn.lock at master zengde/imagemin-app

imagemin-app/media/screenshot.png at main imagemin/imagemin

Options listed below in minimizer.options.encodeOptions.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { module: { rules: [ // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it { test: /\.(jpe?g|png)$/i, type: "asset", }, ], }, optimization: { minimizer: [ new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.squooshMinify, options: { encodeOptions: { mozjpeg: { // That setting might be close to lossless, but it’s not guaranteed // quality: 100, }, webp: { lossless: 1, }, avif: { // cqLevel: 0, }, }, }, }, }), ], },};Advanced setupIf you want to use loader or plugin standalone see sections below, but this is not recommended.By default, plugin configures loader (please use the loader option if you want to disable this behaviour), therefore you should not setup standalone loader when you use a plugin setup.Loader optimizes or generates images using options, so inlined images via data URI (i.e. data:) will be optimized or generated too, not inlined images will be optimized too.Standalone LoaderDocumentation: Using loaders.In your webpack.config.js, add the ImageMinimizerPlugin.loader and specify the asset modules options (if you use images in import):webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { module: { rules: [ // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", }, // We recommend using only for the "production" mode { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: ImageMinimizerPlugin.loader, enforce: "pre", options: { minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, }, }, ], }, ], },};Standalone PluginDocumentation: Using plugins.webpack.config.jsconst ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");module.exports = { module: { rules: [ // You need this, if you are using `import file from "file.ext"`, for `new URL(...)` syntax you don't need it { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", }, ], }, optimization: { minimizer: [ // Extend default minimizer, i.e. `terser-webpack-plugin` for JS "...", // We recommend using only for the "production" mode new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: [ "imagemin-gifsicle", "imagemin-mozjpeg", "imagemin-pngquant", "imagemin-svgo", ], }, }, // Disable `loader` loader: false, }), ], },};OptionsPlugin OptionsNameTypeDefaultDescriptiontest{String\/RegExp|Array}/.(jpe?g|png|gif|tif|webp|svg|avif)$/iTest to match files againstinclude{String\/RegExp|Array}undefinedFiles to includeexclude{String\/RegExp|Array}undefinedFiles to excludeminimizer{Object | Array}undefinedAllows to setup default minimizergenerator{Array}undefinedAllow to setup default generatorsseverityError{String}'error'Allows to choose how errors are displayedloader{Boolean}trueAutomatically adding built-in loaderconcurrency{Number}Math.max(1, os.cpus().length - 1)Maximum number of concurrency optimization processes in one timedeleteOriginalAssets{Boolean}trueAllows to delete the original asset for minimizertestType: String|RegExp|ArrayDefault: /\.(jpe?g\|png\|gif\|tif\|webp\|svg\|avif)\$/iTest to match files against.webpack.config.jsconst