@sapics/gulp-image-resize

Resizing images made easy.

Usage no npm install needed!

<script type="module">
  import sapicsGulpImageResize from 'https://cdn.skypack.dev/@sapics/gulp-image-resize';
</script>

README

gulp-image-resize Build Status

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

Install

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.

Ubuntu:

apt-get install imagemagick
apt-get install graphicsmagick

Mac OS X (using Homebrew):

brew install imagemagick
brew install graphicsmagick

Windows & others:

http://www.imagemagick.org/script/binary-releases.php

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

Example

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

gulp.task('default', () => 
  gulp
    .src('test.png')
    .pipe(imageResize({
      width : 100,
      height : 100,
      crop : true,
      upscale : false
    }))
    .pipe(gulp.dest('dist')));

API

imageResize(options)

options.width

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

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

options.height

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

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

options.upscale

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.

options.crop

Type: Boolean
Default value: false

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

options.gravity

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.

options.quality

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.

options.format

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

Override the output format of the processed file.

options.filter

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).

options.sharpen

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')

options.samplingFactor

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

Define chroma subsampling

options.noProfile

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.

options.interlace

Type: Boolean
Default value: false

Set to true to create interlaced images (scanline interlacing) from PNG, GIF or JPEG files (also known as "progressive" JPEG). For details look for parameter -interlace <type> with the type value set to "Line" in the gm profile documentation.

options.imageMagick

Type: Boolean
Default value: false

Set to true when using ImageMagick instead of GraphicsMagick.

options.background

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

options.flatten

Type: Boolean
Default value: false

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

options.percentage

Type: Number
Default value: null

The value that you want the image to be scaled to.

options.cover

Type: Boolean Default value: false

Determines whether images should cover the area specified by the width and height options. If set to true, the resized images will maintain aspect ratio by overflowing their dimensions as necessary, rather than treating them as maximum-size constraints.

More Examples

// Converting from png to jpeg. No resizing.
gulp.task('convert_png', () => 
  gulp
    .src('test.png')
    .pipe(imageResize({
      format : 'jpeg'
     }))
    .pipe(gulp.dest('dist')));

// Only specify one dimension. Output image won't exceed this value.
gulp.task('width', () => 
  gulp
    .src('test.png')
    .pipe(imageResize({
      width : 100
    }))
    .pipe(gulp.dest('dist')));

// Convert with percentage value.
gulp.task('percentage', () =>
  gulp
    .src('test.png')
    .pipe(imageResize({
      percentage: 50
    }))
    .pipe(gulp.dest('dist')));

Recommended modules

const parallel = require("concurrent-transform");
const os = require("os");

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

const changed = require("gulp-changed");

gulp.task("changed", () =>
  gulp
    .src("src/**/*.{jpg,png}")
    .pipe(changed("dist"))
    .pipe(imageResize({
      width : 100
    }))
    .pipe(gulp.dest("dist")));

const rename = require("gulp-rename");

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

Tests

  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

License

MIT © scalable minds