Gulp-rezzy NPM

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.