gulp-responsive-imgzz

gulp-responsive-imgz

(clone of the innactive gulp-img-retina repo with some improvements)

Add img attribute 'srcset' for variable density/width image loading.

Prerequisites

You must have corresponding images in the folder which the original image in.

Install

npm install gulp-responsive-imgzz

Usage

var gulp = require('gulp');
var imgRetina = require('gulp-responsive-imgzz');
 
var retinaOpts = {
    // Your options here.
};
 
gulp.task('views', function() {
 
  return gulp.src('./views/**/*.html')
    .pipe(imgRetina(retinaOpts))
    .on('error', function(e) {
      console.log(e.message);
    })
    .pipe(gulp.dest('./build'));
 
});

You put html in:

<figure>
    <img src="images/default/example.jpg" alt="example image" />
</figure>

And get html out:

<figure>
    <img src="images/default/example.jpg" alt="example image" srcset="images/default/example.jpg 1x, images/default/[e-mail] 2x, images/default/[e-mail] 3x, images/default/example-mobile.jpg 480w" />
</figure>

Options (Optional)

options.suffix

Type: Object

Default:

imgRetina({
  suffix: {
    '1x': '',
    '2x': '@2x',
    '3x': '@3x'
  }
})

The suffix will insert to image's path, the key is resolution, and value is suffix.

You can also use width srcset params eg.

imgRetina({
  suffix: {
    '1x': '',
    '2x': '@2x',
    '3x': '@3x',
    '480w': '-mobile'
  }
})

Note

SVG's are ignored