rollup-plugin-imagetools

A toolbox of import directives for rollup that import and transform your image at compile-time. All of the image transformations are powered by sharp.

Usage no npm install needed!

<script type="module">
  import rollupPluginImagetools from 'https://cdn.skypack.dev/rollup-plugin-imagetools';
</script>

README

rollup-plugin-imagetools

npm (latest) standard-readme compliant codecov

A toolbox of import directives for rollup that import and transform your image at compile-time. All of the image transformations are powered by sharp.

Features

  • 🚀 Output modern formats
  • 🖼 Resize Images
  • 🔗 Easy Srcset generation
  • ⚡️ Fast in development mode
  • 🔒 Remove Image Metadata
  • 🧩 Extensible

Read the docs to learn more!

Table of Contents

Install

npm install --save-dev rollup-plugin-imagetools
yarn add -D rollup-plugin-imagetools

Usage

import { imagetools } from 'rollup-plugin-imagetools'

export default {
  plugins: [imagetools()]
}
import Image from 'example.jpg?w=400&h=300&webp'

Options

defaultDirectives

Optional defaultDirectives: URLSearchParams | (url: URL) => URLSearchParams

This option allows you to specify directives that should be applied by default to every image. You can also provide a function, in which case the function gets passed the asset ID and should return an object of directives

Defined in

rollup/src/types.ts:19


exclude

exclude: string | RegExp | (string | RegExp)[]

What paths to exclude when processing images.

default ''

Defined in

rollup/src/types.ts:13


include

include: string | RegExp | (string | RegExp)[]

Which paths to include when processing images.

default '/.{heic,heif,avif,jpeg,jpg,png,tiff,webp,gif}?'

Defined in

rollup/src/types.ts:8


removeMetadata

removeMetadata: boolean

Wether to remove potentially private metadata from the image, such as exif tags etc.

default true

Defined in

rollup/src/types.ts:45


silent

silent: boolean

Settings this option to true disables all warnings produced by this plugin

default false

Defined in

rollup/src/types.ts:39

extendOutputFormats

Optional extendOutputFormats(builtins): Record<string, OutputFormat>

You can use this option to extend the builtin list of output formats. This list will be merged with the builtin output formats before determining the format to use.

default []

Parameters

Name Type
builtins Record<string, OutputFormat>

Returns

Record<string, OutputFormat>

Defined in

rollup/src/types.ts:33


extendTransforms

Optional extendTransforms(builtins): TransformFactory<Record<string, unknown>>[]

You can use this option to extend the builtin list of import transforms. This list will be merged with the builtin transforms before applying them to the input image.

default []

Parameters

Name Type
builtins TransformFactory<Record<string, unknown>>[]

Returns

TransformFactory<Record<string, unknown>>[]


resolveConfigs

Optional resolveConfigs: (entries: [string, string[]][], outputFormats: Record<string, OutputFormat>) => Record<string, string | string[]>[]

Type declaration

▸ (entries, outputFormats): Record<string, string | string[]>[]

This function builds up all possible combinations the given entries can be combined an returns it as an array of objects that can be given to a the transforms.

Parameters
Name Type Description
entries [string, string[]][] The url parameter entries
outputFormats Record<string, OutputFormat> -
Returns

Record<string, string | string[]>[]

An array of directive options

Defined in

rollup/src/types.ts:39

Contributing

Feel free to dive in! Open an issue or submit PRs! All information to get you started hacking on imagetools is in CONTRIBUTING.md!

License

MIT © Jonas Kruckenberg.