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: {

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