rollup-plugin-generate-image-sizes

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

// 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.

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 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.

License

MIT