gulp-rezzy

---

The incredibly fast image resizer 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

yarn add gulp-rezzy --dev

const { src, dest } = require('gulp');
const rezzy = require('gulp-rezzy');

const images = () => src('source/img/*')
  .pipe(rezzy([{
    width: 640,
    suffix: '-sm'
  }, {
    width: 1280,
    suffix: '-md'
  }, {
    width: 1920,
    suffix: '-lg'
  }]))
  .pipe(dest('public/img'));

module.exports.images = images;

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 or in the types file. 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.

Thanks

This plugin makes strong use of sharp under the hood. Big props to them! Other than that: Shoutout to chalk, and of course the gulp team for gulp, fancy-log, plugin-error and vinyl! Special thanks go out to Sindre Sorhus for getting me on the right track in regards to writing a gulp plugin!

License

MIT