README
snowpack-plugin-resize-images
# 🔆 Note there is a peer dependency for Sharp
npm i -D sharp snowpack-plugin-resize-images
Quick start
🔆 This plugin resizes images based on matching glob patterns. Your image originals will be unaffected as the processing only happens at build/dev.
This plugin runs in both
snowpack dev
andsnowpack build
// snowpack.config.js
module.exports = {
plugins: [
[
'snowpack-plugin-resize-images',
/** @see "Plugin Options" below */
{
/**
* Glob pattern
* @see https://github.com/isaacs/node-glob#glob-primer
*/
'**/300x250/**': {
/**
* A Sharp method. This is the same as:
* ```
* sharp(input).resize({
* width: 300,
* height: 250,
* options: {
* fit: cover
* }
* })
* ```
*/
resize: {
// Sharp method options
width: 300,
height: 250,
options: {
fit: 'cover',
},
},
/**
* Another Sharp method. This is chained to the method before it.
* That is:
* ```
* sharp(input).resize({
* width: 300,
* height: 250,
* options: {
* fit: cover
* }
* }).jpeg({
* quality: 90
* })
* ```
*/
jpeg: {
quality: 90,
},
},
// Convert all images in the /webp/ directories
// to webp with a quality of 90
'**/webp/**': {
webp: {
quality: 90,
},
},
'**/placeholder/**': {
/**
* This is the same as:
* ```
* sharp(INPUT).blur(30)
* ```
*/
blur: [30],
},
},
],
],
}
Plugin Options
type SnowpackPluginResizeImagesOptions = {
/**
* This is a mapping of glob patterns and their sharp methods
* and options. See the Sharp documentation for a complete list of
* methods and their respective options.
*
* @see https://sharp.pixelplumbing.com/api-output
*/
/**
* Matches image patterns
*/
[globPattern: string]: {
/**
* Chains a method to sharp e.g.
* `sharp(FILE).sharpMethod()`
*/
[sharpMethod: string]:
| {
/**
* Adds options to the sharp method e.g.
* `sharp(FILE).sharpMethod(OPTIONS)`
*/
[sharpMethodOption: string]: any
}
/**
* Add parameters to the sharp method e.g.
* sharp(FILE).sharpMethod(...PARAMETERS)
*/
| any[]
}
}
LICENSE
MIT