dkaoster/rollup-plugin-generate-image-sizes(opens in a new tab)
Language: JavaScript
Automatically generate multiple sizes of images using rollup.
- stars
- 3
- watchers
- 1
- forks
- 1
- open issues
- 3
- Last updated
- 08/30/2024
Language: JavaScript
Automatically generate multiple sizes of images using rollup.
Useful for when you want to automatically resize images for use in a srcset / other responsive web design implementations.
npm i -D rollup-plugin-generate-image-sizes
// 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 <original-filename>@<size>w.<file-extension>. 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.
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 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, 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 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.
MIT