https://github.com/dkaoster/rollup-plugin-generate-image-sizes
Automatically generate multiple sizes of images using rollup.
https://github.com/dkaoster/rollup-plugin-generate-image-sizes
image resize rollup
Last synced: about 1 year ago
JSON representation
Automatically generate multiple sizes of images using rollup.
- Host: GitHub
- URL: https://github.com/dkaoster/rollup-plugin-generate-image-sizes
- Owner: dkaoster
- License: mit
- Created: 2020-11-24T02:34:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T14:06:34.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T21:02:14.270Z (about 1 year ago)
- Topics: image, resize, rollup
- Language: JavaScript
- Homepage:
- Size: 590 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rollup-plugin-generate-image-sizes
Useful for when you want to automatically resize images for use in a srcset / other responsive web design implementations.
## Installation
```
npm i -D rollup-plugin-generate-image-sizes
```
## Usage
```js
// rollup.config.js
import { generateImageSizes } from 'rollup-plugin-generate-image-sizes';
export default {
plugins: [
generateImageSizes({
dir: 'static',
size: [1400, 1024, 640, 320],
hook: 'renderStart',
quality: 65,
inputFormat: ['jpg', 'jpeg', 'png'],
outputFormat: ['jpg'],
forceUpscale: false,
skipExisting: true,
maxParallel: 4,
outputManifest: 'static/images-manifest.json'
})
]
}
```
Note: All output files are named in the pattern `@w.`. The plugin looks for the `@` symbol to determine which files have already been converted, which means that all files with the `@` will be ignored. Files with `#` are also ignored.
### Configuration
`dir` (required | `string` or `[string]`) the string or array of strings specifying the directory where the images we want to resize are.
`size` (default: [1400, 1024, 640, 320] | `int` or `[int]`) An integer or array of integers specifying the width in pixels of our output image.
`hook` (default: renderStart) [the rollup hook](https://rollupjs.org/guide/en/#build-hooks) that this plugin should use.
`quality` (default: 65 | `int`): The quality of output images, for image formats that have output quality controls.
`inputFormat` (default: ['jpg', 'jpeg', 'png'] | `string` or `[string]`): The file extensions of the images we care about. Must be a format supported by [jimp](https://github.com/oliver-moran/jimp#supported-image-types), or `match`, which matches the input format of the image.
`outputFormat` (default: 'jpg' | `string` or `[string]`): The file extensions of the images we want to output. Must be a format supported by [jimp](https://github.com/oliver-moran/jimp#supported-image-types) or `match`, which is used to match the input format.
`forceUpscale` (default: false | `boolean`): If the source image is larger, do we want to forcibly generate a scaled up version or whether we should just ignore it.
`skipExisting` (default: true | `boolean`): whether we should skip existing images that have already been resized. a false value means that images will be regenerated and overwritten every single time this script is run.
`maxParallel` (default: 4 | `int`): the max number of parallel images that can be processed concurrently.
`outputManifest` (default: null | `string`): the file to output a json containing all the images this plugin generated.
## License
MIT