Vite 中文文档


  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 💿


  1. ``` shell
  2. npm install -D vite-plugin-image-presets # pnpm, yarn
  3. ```

Configuration ⚙️


Add it to your plugins in vite.config.ts

  1. ``` ts
  2. import { defineConfig } from 'vite'
  3. import imagePresets, { widthPreset } from 'vite-plugin-image-presets'

  5. export default defineConfig({
  6.   plugins: [
  7.     imagePresets({
  8.       thumbnail: widthPreset({
  9.         class: 'img thumb',
  10.         loading: 'lazy',
  11.         widths: [48, 96],
  12.         formats: {
  13.           webp: { quality: 50 },
  14.           jpg: { quality: 70 },
  15.         },
  16.       }),
  17.     }),
  18.   ],
  19. })
  20. ```

Usage 🚀


Use the preset query parameter to obtain an array of source and img attrs:

  1. ``` js
  2. import thumbnails from '~/images/logo.jpg?preset=thumbnail'

  4. expect(thumbnails).toEqual([
  5.   {
  6.     type: 'image/webp',
  7.     srcset: '/assets/logo.ffc730c4.webp 48w, /assets/logo.1f874174.webp 96w',
  8.   },
  9.   {
  10.     type: 'image/jpeg',
  11.     srcset: '/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w',
  12.     src: '/assets/logo.81d93491.jpeg',
  13.     class: 'img thumb',
  14.     loading: 'lazy',
  15.   },
  16. ])
  17. ```

You can also use the src and srcset query parameters for direct usage:

  1. ``` js
  2. import srcset from '~/images/logo.jpg?preset=thumbnail&srcset'
  3. import src from '~/images/logo.jpg?preset=thumbnail&src'

  5. expect(srcset).toEqual('/assets/logo.063759b1.jpeg 48w, /assets/logo.81d93491.jpeg 96w')
  6. expect(src).toEqual('/assets/logo.81d93491.jpeg')
  7. ```

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:

Halve the size of images by optimising for high density displays

License


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