Evgeny Vlasov

fonts4web.ru

Для работы с растром, например с фотками https://www.npmjs.com/package/gulp-responsive

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

gulp.task('default', function() {
  return gulp.src('src/*.jpg')
    .pipe(responsive({
      'photo-*.jpg': [{
        width: 400
      },{
        width: 800,
        rename: {suffix: '@2x'}
      }],
      'background-*': [{
        height: 600
      },{
        // iPhone 4s, 5, 5s
        height: 600 * 2,
        rename: {suffix: '@2x'}
      },{
        // iPhone 6, 6+
        height: 600 * 3,
        rename: {suffix: '@3x'}
      }]
    }))
    .pipe(gulp.dest('dist'));
});

Использование в HTML

<img src="photo-cats.jpg" 
  srcset="photo-cats.jpg 1x, photo-cats@2x.jpg 2x"
  alt="My cats">

Использование в CSS

.banner {
  background-repeat: no-repeat;
  background-size: contain;
  //fallback
  background-image: url("background-dogs.jpg");
  background-image: image-set(
    "background-dogs.jpg" 1x,
    "background-dogs@2x.jpg" 2x,
    "background-dogs@3x.jpg" 3x);
}