vite-plugin-image-presets

vite-plugin-image-presets

Image Presets for Vite.js apps

[Vite]: https://vitejs.dev/
[Sharp]: https://sharp.pixelplumbing.com/
[îles]: https://iles-docs.netlify.app/
[example]: https://github.com/ElMassimo/vite-plugin-image-presets/blob/main/example/App.vue#L10
[live]: https://image-presets.netlify.app/

This [Vite] plugin allows you to define presets for image processing using [Sharp],
allowing you to optimize, resize, and process images consistently and with ease.

[__Demo__ 🖼][live]

Installation 💿

``bash
npm install -D vite-plugin-image-presets # pnpm, yarn
`

Configuration ⚙️

Add it to your plugins in vite.config.ts

`ts
import { defineConfig } from 'vite'
import imagePresets, { widthPreset } from 'vite-plugin-image-presets'

export default defineConfig({
plugins: [
imagePresets({
thumbnail: widthPreset({
class: 'img thumb',
loading: 'lazy',
widths: [48, 96],
formats: {
webp: { quality: 50 },
jpg: { quality: 70 },
},
}),
}),
],
})
`

$3

Use the preset query parameter to obtain an array of source and img attrs:

`js
import thumbnails from '~/images/logo.jpg?preset=thumbnail'

expect(thumbnails).toEqual([
{
type: 'image/webp',
srcset: '/assets/logo.ffc730c4.webp 48w, /assets/logo.1f874174.webp 96w',
},
{
type: 'image/jpeg',
srcset: '/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w',
src: '/assets/logo.81d93491.jpeg',
class: 'img thumb',
loading: 'lazy',
},
])
`

You can also use the src and srcset query parameters for direct usage:

`js
import srcset from '~/images/logo.jpg?preset=thumbnail&srcset'
import src from '~/images/logo.jpg?preset=thumbnail&src'

expect(srcset).toEqual('/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w')
expect(src).toEqual('/assets/logo.81d93491.jpeg')
`

Check the [example] for additional usage information and different preset examples, or [see it live][live].

Documentation 📖

Additional usage documentation coming soon.

In the meantime, check the @islands/images module for [îles].

Acknowledgements

- [sharp][sharp]: High performance Node.js image processing
- vite-imagetools: The middleware used in development is based on this nice library.

The hdPreset` is based on the following article by Jake Archibald:

- Halve the size of images by optimising for high density displays

License

This library is available as open source under the terms of the MIT License.