Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unplugin/unplugin-imagemin
📦 Compression Image compression plugin based on squoosh and sharp
https://github.com/unplugin/unplugin-imagemin
Last synced: 8 days ago
JSON representation
📦 Compression Image compression plugin based on squoosh and sharp
- Host: GitHub
- URL: https://github.com/unplugin/unplugin-imagemin
- Owner: unplugin
- Created: 2022-11-17T07:29:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-28T16:30:51.000Z (5 months ago)
- Last Synced: 2024-05-29T23:35:55.757Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 79.3 MB
- Stars: 168
- Watchers: 1
- Forks: 17
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# 📦📦 unplugin Imagemin Picture compression
[](https://www.npmjs.com/package/unplugin-imagemin)
### ✨✨ Continuous iterative development in testing
```bash
✨ : 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 time
## Squoosh && Sharp && Svgo
Unplugin-imagemin supports two compression modes
[Sharp](https://github.com/lovell/sharp) 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](https://github.com/GoogleChromeLabs/squoosh) is an image compression web app that reduces image sizes through numerous formats.
**Squoosh** with rust & wasm
[Svgo](https://github.com/svg/svgo) Support compression of pictures in svg format
## ✨Warning
Although 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 factors
It is recommended that mode choose `sharp`.
## 🍰 Effect display
https://github.com/unplugin/unplugin-imagemin/assets/66500121/49169b22-7f5b-4cdc-b023-302003b15522
## 📦 Installation
```bash
pnpm add unplugin-imagemin@latest -D
```
#### support vite and rollup.
Basic
```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'unplugin-imagemin/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), imagemin()],
});
```
Advanced
```ts
iimport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'unplugin-imagemin/vite';
import path from 'path';
// https://vitejs.dev/config/
export 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' },
],
}),
],
});
```
## 🌸 DefaultConfiguration
Squoosh DefaultConfiguration and sharp DefaultConfiguration
DefaultConfiguration see [DefaultConfiguration](https://github.com/ErKeLost/unplugin-imagemin/blob/main/src/core/compressOptions.ts)
Plugin property configuration see [configuration](https://github.com/ErKeLost/unplugin-imagemin/blob/main/src/core/types/index.ts)
```typescript
export 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;
}
```