vite-imagetools v7.0.2
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
Table of Contents
Install
npm install --save-dev vite-imagetools
Usage
import { defineConfig } from 'vite'
import { imagetools } from 'vite-imagetools'
export default defineConfig({
plugins: [imagetools()]
})
import Image from 'example.jpg?w=400&h=300&format=webp'
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
import { defineConfig } from 'vite'
import { imagetools } from 'vite-imagetools'
export default defineConfig({
plugins: [
imagetools({
defaultDirectives: (url) => {
if (url.searchParams.has('spotify')) {
return new URLSearchParams({
tint: 'ffaa22'
})
}
return new URLSearchParams()
}
})
]
})
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
<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
>
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
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
11 days ago
1 month ago
1 month ago
4 months ago
5 months ago
7 months ago
6 months ago
6 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago