Generate multiple image sizes for responsive designs.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


A simple Gulp plugin that allows the resizing and renaming of images, primarily for responsive applications. It uses GraphicsMagick to allow simple resizing, cropping, quality control and more.


Install with npm.

npm install --save-dev gulp-responsive-images


gulp-responsive-images requires GraphicsMagick to function. Installation is simple:


apt-get install graphicsmagick

Mac OS X (using Homebrew):

brew install graphicsmagick

Windows (XP, Vista, 7, 8, and 10) 32- or 64-bit:

Decide upon Q8 or Q16:

A Q8 version is fine for processing typical photos intended for viewing on a computer screen. If you are dealing with film, scientific, or medical images, use ICC color profiles, or deal with images that have limited contrast, then the Q16 version is recommended.

Download and Install, be sure that "Update executable search path" is checked during installation.


// Image.js

var images = {
  'hero.png': [
      crop: false,
      format: null,
      gravity: 'Center',
      height: 100,
      overwrite: true,
      quality: 100,
      rename: null,
      percentage: false,
      sharpen: false,
      suffix: '-100'
      upscale: false,
      width: 100
module.exports = images;      

Can also be used within the pipe to overwrite specific file configurations.


var gulp = require('gulp');
var responsive = require('gulp-responsive-images');

gulp.task('default', function () {
      'hero.png': [{
        width: 100,
        suffix: '-100'
      }, {
        width: 100 * 2,
        suffix: '-100-2x'
      '*.png': [{
        width: 600,
        crop: true,
        gravity: 'Center'