npm install gulp-lazysizes-srcset
<style>
img[data-sizes]{width:100%;}
</style>
Responsive Images For Retina
var gulp = require('gulp');
var lazyScr = require('gulp-lazysizes-srcset');
gulp.task('views', function() {
return gulp.src('./src/*.html')
.pipe(lazyScr({
decodeEntities: false,
data_src: 'data-src',
data_srcset: 'data-srcset',
suffix: {'1x': '@1x', '2x': '@2x', '3x': '@3x'}
}))
.pipe(gulp.dest('./build'));
});
You put html in:
<img class="lazyload" data-src="images/default/example.jpg" data-sizes="auto" alt="example image" />
And get html out:
<img class="lazyload" data-src="images/default/example.jpg" data-sizes="auto" alt="example image" data-srcset="images/default/example@1x.jpg 1x, images/default/example@2x.jpg 2x, images/default/example@3x.jpg 3x" />
Responsive Images with breakpoints
var gulp = require('gulp');
var lazyScr = require('gulp-lazysizes-data-srcset');
gulp.task('views', function() {
return gulp.src('./src/*.html')
.pipe(lazyScr({
decodeEntities: false,
data_src: 'data-src',
data_srcset: 'data-srcset',
suffix: {'320w': '@320w', '640w': '@640w', '960w': '@960w'}
}))
.pipe(gulp.dest('./build'));
});
You put html in:
<img class="lazyload" data-src="images/default/example.jpg" data-sizes="auto" alt="example image" />
And get html out:
<img class="lazyload" data-src="images/default/example.jpg" data-sizes="auto" alt="example image" data-srcset="images/default/example@320w.jpg 320w, images/default/example@640w.jpg 640w, images/default/example@960w.jpg 960w" />
Type: Object
Default: {'1x': '@1x', '2x': '@2x', '3x': '@3x'}
The suffix will insert to image's path, the key is resolution, and value is suffix.