Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ElMassimo/vite-plugin-image-presets
🖼 Image Presets for Vite.js apps
https://github.com/ElMassimo/vite-plugin-image-presets
image-processing images sharp ssg vite-plugin vitejs
Last synced: about 2 months ago
JSON representation
🖼 Image Presets for Vite.js apps
- Host: GitHub
- URL: https://github.com/ElMassimo/vite-plugin-image-presets
- Owner: ElMassimo
- License: mit
- Created: 2022-01-11T02:34:07.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-28T09:35:37.000Z (6 months ago)
- Last Synced: 2024-03-25T02:20:49.236Z (2 months ago)
- Topics: image-processing, images, sharp, ssg, vite-plugin, vitejs
- Language: TypeScript
- Homepage: https://image-presets.netlify.app/
- Size: 354 KB
- Stars: 244
- Watchers: 3
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Lists
- awesome-vite - vite-plugin-image-presets - Define presets to automatically create and optimize responsive images. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-image-presets - Define presets to automatically create and optimize responsive images. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-image-presets - Define presets to automatically create and optimize responsive images. (Plugins / Framework-agnostic Plugins)
- awesome-viter - vite-plugin-image-presets - Define presets to automatically create and optimize responsive images. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-image-presets - Define presets to automatically create and optimize responsive images. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-image-presets - Define presets to automatically create and optimize responsive images. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-image-presets - Define presets to automatically create and optimize responsive images. (Plugins / Framework-agnostic Plugins)
README
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 },
},
}),
}),
],
})
```
### Usage 🚀
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`](https://github.com/ElMassimo/iles/tree/main/packages/images) module for [îles].
## Acknowledgements
- [sharp][sharp]: High performance Node.js image processing
- [vite-imagetools](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite): 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](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/)
## License
This library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).