Vite Plugin Img
A Vite plugin to transform images in your HTML. For images, creates Responsive Images by cutting images at different sizes and formats. For gif
s, transforms them into videos.
Installation
First, install from NPM:
$ npm install vite-plugin-img --save-dev
Then, include the plugin in your Vite config:
const { imgPlugin } = require('vite-plugin-img');
module.exports = {
plugins: [imgPlugin()],
};
Usage
Images should be stored in, and referenced from, your Vite public
directory. Then, write standard img
tags referencing the images you want! As long as the img
tag is in the rendered HTML, this plugin will pick it up and update it!
Options
The following options are available:
-
formats
- The formats to include -
resize
- Image resize options. Images won't be upscaled, and are based on image width-
resize.min
- Smallest image width to cut, in pixels. Number, defaults to250
-
resize.max
- Largest image width to cut, in pixels. Number, defaults to1500
-
resize.step
- Difference, in pixels, between the width of each image cut. Number, defaults to150
.
-
-
wrapSVG
- Whether or not to wrap SVGs inpicture
elements. Boolean, defaults tofalse
-
attrs
- Array of attribute names to include in wrappedpicture
element from the wrappingimg
tag. Defaults to['class']
-
sizes
- Defaultsizes
attribute, if one isn't available. Defaults to100vw
-
lazy
- Whether to lazyload images using theloading
attribute. Boolean, defaults totrue
-
optimizer
- Which image optimizer to use,sharp
orsquoosh
. Sharp is faster, but results in larger file sizes. Squoosh is slower, but results in smaller file sizes. Performance is only affected on build, not during dev. Defaults tosquoosh
.