https://github.com/jaredlunde/snowpack-plugin-resize-images
Resize your build images with Sharp and Snowpack
https://github.com/jaredlunde/snowpack-plugin-resize-images
sharp snowpack snowpack-plugin snowpack-plugin-resize-images snowpack-plugin-sharp
Last synced: 10 months ago
JSON representation
Resize your build images with Sharp and Snowpack
- Host: GitHub
- URL: https://github.com/jaredlunde/snowpack-plugin-resize-images
- Owner: jaredLunde
- License: mit
- Created: 2020-08-11T15:40:35.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-28T00:42:55.000Z (almost 6 years ago)
- Last Synced: 2024-08-10T07:52:07.200Z (almost 2 years ago)
- Topics: sharp, snowpack, snowpack-plugin, snowpack-plugin-resize-images, snowpack-plugin-sharp
- Language: TypeScript
- Homepage:
- Size: 202 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# snowpack-plugin-resize-images
> Resize your images with [Sharp](https://sharp.pixelplumbing.com/api-constructor) and [Snowpack](https://snowpack.dev)
```sh
# 🔆 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` and `snowpack build`
````js
// 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
```typescript
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