browser-sync development middleware to resize and transform local images (fake-CDN features)
npm i -D browsersync-images-middleware sharp
-
Wherever you use browser-sync, add the middleware option, like this:
... middleware: [{ route: '/img', handle: require('browsersync-images-middleware')('public') }], ...
[img]
Your chosen route. Can be anything, as long as you set your filter the same way.[public]
The root path of your images, probably your published/destination folder.
-
and provide for your templates, a simple function, helper, filter, etc to mimic your favorite CDN's important features. With these parameters/options:
- width w=200
- height h=300
- dpr (default
1
) d=3 - resize smart/fit (default
smart
) s=fit - force webp/avif/auto f=auto
to build these (random) url:
/img/w=200,f=webp/image/somewhere/cat.jpg
/img/w=300,h=300/image/anotherpath/dog.png
/img/w=400,h=200,s=fit,f=auto/image/tree/bird.jpg
You can clone/download the github repository where you will find some demos.
A handlebars™ demo here with its simpliest helper:
Handlebars.registerHelper('cdn', (imagePath, options) => {
const o = options.hash;
return `/img/`
+ `w=${o.width}`
+ `${o.height ? ',h='+o.height : ''}`
+ `${o.force ? ',f='+o.force : ''}`
+ `${imagePath}`;
});
Or a Eleventy™ one there with a basic filter:
eleventyConfig.addFilter('cdn', (imagePath, width, height, force) => {
return `/img/`
+ `w=${width}`
+ `${height ? ',h='+height : ''}`
+ `${force ? ',f='+force : ''}`
+ `${imagePath}`;
});
v2.0.1
- sharp peer dependency corrected
v2.0.0
- BREAKING: sharp is now a peerDependency, you must install it seperately
v1.0.0
- Automatic smartcrop can now be changed to fit
- WebP, AVIF and auto mode (Thanks to sharp)
v0.4.x
- Correction: URL is now "URI decoded"
- Added png images
v0.2.0
- Eleventy sample
- Added option: DPR
v0.1.0
- Initial upload