https://github.com/cijiugechu/rollup-plugin-napi-image

Rollup plugin for optimizing images powered by @napi-rs/image
https://github.com/cijiugechu/rollup-plugin-napi-image

compression image optimization rollup rollup-plugin vite vite-plugin

Last synced: 8 days ago
JSON representation

Rollup plugin for optimizing images powered by @napi-rs/image

• Host: GitHub
• URL: https://github.com/cijiugechu/rollup-plugin-napi-image
• Owner: cijiugechu
• License: mit
• Created: 2022-12-31T11:08:42.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-06T09:48:54.000Z (3 months ago)
• Last Synced: 2024-09-14T15:36:31.426Z (about 2 months ago)
• Topics: compression, image, optimization, rollup, rollup-plugin, vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 1.54 MB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rollup-plugin-napi-image

Rollup plugin for optimizing images powered by [@napi-rs/image](https://github.com/Brooooooklyn/Image), without involving `node-gyp`.

see [example](./playground/)

## Usage

### 1. install

```shell

npm install rollup-plugin-napi-image --save-dev

# or you use pnpm

pnpm add  rollup-plugin-napi-image -D

```

### 2. add plugin to your config file

- if you are using `rollup`, import this plugin and add to `plugins` field like following:

```typescript

import { defineConfig } from 'rollup'

import { napiImage } from 'rollup-plugin-napi-image'

// ... other lines

export default defineConfig({

  plugins: [

    /* other plugins */

    napiImage({

      mode: 'lossy',

      quality: 75,

    }),

  ],

})

```

- if you are using `vite` , just replace the first line of above with `import { defineConfig } from 'vite'`

### 3. options

| name      | type                                          | default | description                                                                                                                                                   |

| :-------- | :-------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |

| `include` | `RegExp \| string \| Array` | null    | A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default all supported images are targeted. |

| `exclude` | `RegExp \| string \| Array` | null    | A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no images are ignored.                 |

| `mode`    | `'lossy' \| 'lossless'`                       |         | The optimization mode applied to images, when `mode` is `lossy` , you can specify `quality` for the process.                                                  |

| `quality` | `number`                                      | 75      | Only works when `mode` is `lossy`.                                                                                                                            |

| `toModernExt` | `(ext: SupportedExt) => ModernExt` | `ext => ext` | A conversion function that converts the specified image format to a modern image format. |

### 4. supported formats

1. `jpg/jpeg`

2. `png`

3. `webp`

4. `avif`

## License

MIT © [nemurubaka](https://github.com/cijiugechu)