@oncede/snowpack-plugin-once-image-sharp
This snowpack plugin allows you to use the sharp image library with percentages for width.
Installation
npm i -D @oncede/snowpack-plugin-once-image-sharp@latest sharp@latestRun example
git clone @oncede/snowpack-plugin-once-image-sharp . && npm i && npm run example buildUsage
options.forceRebuild only takes effect if buildOption.clean is set to false
buildOption.clean clears the whole dist folder
By default previously generated images would be skipped. (checked with fs.access by path )
Simply add the following code to your snowpack.config.json (encapsulated by { } )
"plugins": [
[
"@oncede/snowpack-plugin-once-image-sharp",
{
"options": {
"silent": true,
"forceRebuild": false,
"defaultFormat": "webp",
"jsonOutput": "image_sizes.json",
"generateImagesOnDev": false
},
"imageConfig": {
"**/*.jpg": [
{
"resize": {
"width": "1%"
},
"rename": { "suffix": "-init" },
"format": "webp",
"formatOptions": {
"quality": 80
},
"blur": true
},
{
"resize": {
"width": "5%"
},
"rename": { "suffix": "-5" },
"format": "webp",
"formatOptions": {
"quality": 80
}
},
{
"resize": {
"width": "20%"
},
"rename": { "suffix": "-20" },
"format": "webp",
"formatOptions": {
"quality": 80
}
},
{
"resize": {
"width": "40%"
},
"rename": { "suffix": "-40" },
"format": "webp",
"formatOptions": {
"quality": 80
}
},
{
"resize": {
"width": "60%"
},
"rename": { "suffix": "-60" },
"format": "webp",
"formatOptions": {
"quality": 80
}
},
{
"resize": {
"width": "80%"
},
"rename": { "suffix": "-80" },
"format": "webp",
"formatOptions": {
"quality": 80
}
},
]
}
}
]
]
image_sizes.json Output
It might be easier to dynamically build the image sizes with this JSON (take a look at the example)
{
"/assets/img/": {
"dariusz-sankowski-dvK_CT1Wg78-unsplash": {
"dariusz-sankowski-dvK_CT1Wg78-unsplash-init.webp": {
"format": "webp",
"size": -1,
"width": 46,
"height": 35
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-5.webp": {
"format": "webp",
"size": -1,
"width": 230,
"height": 173
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-10.webp": {
"format": "webp",
"size": -1,
"width": 461,
"height": 346
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-20.webp": {
"format": "webp",
"size": -1,
"width": 922,
"height": 692
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-30.webp": {
"format": "webp",
"size": -1,
"width": 1382,
"height": 1037
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-40.webp": {
"format": "webp",
"size": -1,
"width": 1843,
"height": 1382
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-50.webp": {
"format": "webp",
"size": -1,
"width": 2304,
"height": 1728
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-60.webp": {
"format": "webp",
"size": -1,
"width": 2765,
"height": 2074
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-70.webp": {
"format": "webp",
"size": -1,
"width": 3226,
"height": 2420
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-80.webp": {
"format": "webp",
"size": -1,
"width": 3686,
"height": 2765
},
"dariusz-sankowski-dvK_CT1Wg78-unsplash-90.webp": {
"format": "webp",
"size": -1,
"width": 4147,
"height": 3110
}
}
}
}
Release History
- 1.0.0
- Plugin now serves images properly in dev
- Every folder containing an image will be mounted automatically to serve images properly
- 0.7.0
- plugin runs on both (build && dev) processes.
- 0.4.0
- added generateImagesOnDev Option to skip image generation during build --watch
- moved image_sizes.json.json to root folder
- calculates image sizes on build --watch rather than compiling the files
- simplified default option setup
- 0.3.0
- added a jsonOutput to simplify the dynamic usage
- 0.2.3
- switched from transform() to load()
- added a defaultFormat option for the source image
- 0.2.1
- Running only on build process w/o Errors
- 0.1.0
- First working example
- 0.0.3
- init
Meta
Christoph Luig – @email – www.0nce.de
Distributed under the MIT license. See LICENSE for more information.
Inspired by
Both wrote amazing plugins, which helped me to create this library.
Contributing
- Fork it (https://github.com/yourname/yourproject/fork)
- Create your feature branch (
git checkout -b feature/fooBar) - Commit your changes (
git commit -am 'Add some fooBar') - Push to the branch (
git push origin feature/fooBar) - Create a new Pull Request