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 1 month 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 (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-28T09:35:37.000Z (12 months ago)
• Last Synced: 2024-10-11T14:40:13.295Z (about 1 month ago)
• Topics: image-processing, images, sharp, ssg, vite-plugin, vitejs
• Language: TypeScript
• Homepage: https://image-presets.netlify.app/
• Size: 354 KB
• Stars: 250
• Watchers: 3
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

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