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