Skip to content

Dynamically resize images for responsive applications.

Notifications You must be signed in to change notification settings

dcgauld/gulp-responsive-images

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 

Repository files navigation

gulp-responsive-images

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

Install with npm.

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

GraphicsMagick

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

Ubuntu:

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.

Options

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

Example

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

gulp.task('default', function () {
  gulp.src('source/images/**/*')
    .pipe(responsive({
      'hero.png': [{
        width: 100,
        suffix: '-100'
      }, {
        width: 100 * 2,
        suffix: '-100-2x'
      }],
      '*.png': [{
        width: 600,
        crop: true,
        gravity: 'Center'
      }]
    }))
    .pipe(gulp.dest('dist/images'));
});

About

Dynamically resize images for responsive applications.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published