gulp-image-resize editorconfig gulp npm

Resizing images made easy - thanks to imagemagick.

gulp-image-resize Build Status

Resizing images made easy - thanks to GraphicsMagick or ImageMagick. Fork of grunt-image-resize.


Install with npm

npm install --save-dev gulp-image-resize

GraphicsMagick or ImageMagick

Make sure GraphicsMagick or ImageMagick is installed on your system and properly set up in your PATH.


apt-get install imagemagick
apt-get install graphicsmagick

Mac OS X (using Homebrew):

brew install imagemagick
brew install graphicsmagick

Windows & others:

Confirm that ImageMagick is properly set up by executing convert -help in a terminal.


var gulp = require('gulp');
var imageResize = require('gulp-image-resize');

gulp.task('default', function () {
      width : 100,
      height : 100,
      crop : true,
      upscale : false




Type: Number
Default value: 0 (only if height is defined)

A number value that is passed as pixel or percentage value to imagemagick.


Type: Number
Default value: 0 (only if width is defined)

A number value that is passed as pixel or percentage value to imagemagick.


Type: Boolean
Default value: false

Determines whether images will be upscaled. If set to false (default), image will be copied instead of resized if it would be upscaled by resizing.


Type: Boolean
Default value: false

Determines whether images will be cropped after resizing to exactly match options.width and options.height.


Type: String
Default value: Center
Possible values: NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast

When cropping images this sets the image gravity. Doesn’t have any effect, if options.crop is false.


Type: Number
Default value: 1

Determines the output quality of the resized image. Ranges from 0 (really bad) to 1 (almost lossless). Only applies to jpg images.


Type: String
Default value: Format of the input file
Possible values: gif, png, jpeg etc.

Override the output format of the processed file.


Type: String
Possible values: Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc

Set the filter to use when resizing (e.g. Catrom is very good for reduction, while hermite is good for enlargement).


Type: Boolean | String
Default value: false

Set to true to apply a slight unsharp mask after resizing. Or set a string to setup the unsharp. See gm unsharp documentation. (e.g. ‘0.5x0.5+0.5+0.008’)


Type: Array[Cr, Cb]
Possible values: [2, 2] for 4:2:2, [1, 1] for 4:1:1

Define chroma subsampling


Type: Boolean
Default value: false

Set to true to enforce removal of all embedded profile data like icc, exif, iptc, xmp and so on. If source files represent e.g. untouched camera data or images optimized for print this may decrease image size drastically. Therefore this is probably wanted in cases where thumbnails are generated for web preview purposes. For details look for parameter +profile “*” in the gm profile documentation.


Type: Boolean
Default value: false

Set to true when using ImageMagick instead of GraphicsMagick.


Type: String
Possible values: none to keep transparency, beige to set beige background, #888 for gray.

Define background color (default is white), for example when converting SVG images to PNGs. See gm background documentation


Type: Boolean
Default value: false

Combines image layers into one. Can be used for layered formats such as PNG. See gm flatten documentation.

More Examples

// Converting from png to jpeg. No resizing.
gulp.task('convert_png', function () {
  return gulp.src('test.png')
    .pipe(imageResize({ format : 'jpeg' }))

// Only specify one dimension. Output image won't exceed this value.
gulp.task('width', function () {
      width : 100

Recommended modules

  • concurrent-transform: parallelize image resizing “`js var parallel = require(“concurrent-transform”); var os = require(“os”);

gulp.task(“parallel”, function () { gulp.src(“src/*/.{jpg,png}”) .pipe(parallel( imageResize({ width : 100 }), os.cpus().length )) .pipe(gulp.dest(“dist”)); });

* [gulp-changed]( only resize changed images
var changed = require("gulp-changed");

gulp.task("changed", function () {
    .pipe(imageResize({ width : 100 }))
  • gulp-rename: add a suffix or prefix “`js var rename = require(“gulp-rename”);

gulp.task(“suffix”, function () { gulp.src(“src/*/.{jpg,png}”) .pipe(imageResize({ width : 100 })) .pipe(rename(function (path) { path.basename += “-thumbnail”; })) .pipe(gulp.dest(“dist”)); }); “`


  1. You need both ImageMagick and GraphicsMagick installed on your system to run the tests.
  2. Install all npm dev dependencies npm install
  3. Install gulp globally npm install -g gulp
  4. Run gulp test


MIT © scalable minds

Related Repositories



Resizing images made easy - thanks to imagemagick. ...



define your image sizes in your code, not your build file ...



Gulp plugin to resize image using sharp (libvips binding for nodejs) ...

Top Contributors

normanrz davidpfahler atufkas webcaetano axyz Mitranim MaxXx1313 tzi piotr-cz staff0rd


-   v0.11.0 zip tar
-   v0.10.0 zip tar
-   v0.9.0 zip tar
-   v0.8.0 zip tar
-   v0.7.2 zip tar
-   v0.7.1 zip tar
-   v0.7.0 zip tar
-   v0.6.0 zip tar
-   v0.5.0 zip tar
-   v0.4.3 zip tar