vite-imagetools weekly downloads statistics

vite-imagetools

A toolbox of import directives for Vite that can 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 • Usage • Options • Contributing • License

Install

Usage

You can also import a directory of images using Vite's import.meta.glob with its query option.

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. This can be used to define all sorts of shorthands or presets.

example

exclude

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

What paths to exclude when processing images. This defaults to the public dir to mirror Vite's behavior.

default 'public\/**\/*'

include

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

Which paths to include when processing images.

default /^[^?]+\.(heif|avif|jpeg|jpg|png|tiff|webp|gif)(\?.*)?$/

removeMetadata

• removeMetadata: boolean

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

default true

extendOutputFormats

▸ Optional extendOutputFormats(builtins): Record

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 |

Returns

Record

extendTransforms

▸ Optional extendTransforms(builtins): TransformFactory\>[]

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\>[] |

Returns

TransformFactory\>[]

resolveConfigs

• Optional resolveConfigs: (entries: [string, string[]][], outputFormats: Record) => Record[]

Type declaration

▸ (entries, outputFormats): Record[]

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

Returns

Record[]

An array of directive options

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.

Description from the npm listing.