Skip to content

ElMassimo/vite-plugin-image-presets

Repository files navigation


vite-plugin-image-presets

Image Presets for Vite.js apps


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 🖼

Installation 💿

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

Configuration ⚙️

Add it to your plugins in vite.config.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:

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:

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.

Documentation 📖

Additional usage documentation coming soon.

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

Acknowledgements

  • 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:

License

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