gulp-rezzy
v3.0.0
Published
The incredibly fast image resize utility for gulp. ⚡️
Downloads
44
Maintainers
Readme
gulp-rezzy
The incredibly fast image resize utility for
gulp
. ⚡️
gulp-rezzy
enables you to resize your images and then pipe each and every newly created version version of it into your stream. This allows you to only have one big background image asset in your source directory and then generate several smaller versions of it for all your responsiveness needs automatically. No more Photoshop for you, my friend!
Setup
npm i gulp-rezzy -D
import gulp from 'gulp';
import rezzy from 'gulp-rezzy';
export const images = () => src('source/img/*')
.pipe(rezzy([{
width: 640,
suffix: '-sm'
}, {
width: 1280,
suffix: '-md'
}, {
width: 1920,
suffix: '-lg'
}]))
.pipe(dest('public/img'));
This plugin works perfectly in tandem with gulp-imagemin
and gulp-webp
.
Config
You can configure gulp-rezzy
by passing in an array of objects containing the details of the versions to be generated.
width
and height
are optional. If none of them are supplied, there'll be no resizing. If one of them is present, the image will be transformed accordingly, preserving the aspect ratio. If both are present, the image will be resized and cropped to those exact dimensions. suffix
is always required. If no configuration gets passed, no transformations will be made.
You can see all available options for fit
and position
in the sharp
documentation. They get passed right to sharp
.
width
Type: number
Default: undefined
Desired width of the image in pixels. Either width
or height
has to be set.
height
Type: number
Default: undefined
Desired height of the image in pixels. Either height
or width
has to be set.
fit
Type: string
Default: 'cover'
How the image should fit inside the specified dimensions.
position
Type: string
Default: 'center'
What or where to focus on when cropping is necessary.
suffix
Type: string
Default: undefined
String to prepend the file extension.
License
MIT