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