Image Presets for Vite.js apps. Optimize, resize, and process images consistently and with ease.
npm install vite-plugin-image-presetsImage 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]
``bash`
npm install -D vite-plugin-image-presets # pnpm, yarn
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 },
},
}),
}),
],
})
`
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].
Additional usage documentation coming soon.
In the meantime, check the @islands/images module for [îles].
- [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
This library is available as open source under the terms of the MIT License.