/vite-plugin-image-presets

๐Ÿ–ผ Image Presets for Vite.js apps

Primary LanguageTypeScriptMIT LicenseMIT


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.