See gulp-html-transform for usage
This is a plugin for gulp-html-transform
Converts html srcsets to automatically add all your responsive images
Works very nicely with gulp-srcset
Using npm
$ npm install --save gulp-html-srcset
Using yarn
$ yarn add gulp-html-srcset
const { transform } = require('gulp-html-transform')
const { htmlSrcset } = require('gulp-html-srcset')
gulp.task('html', () => {
gulp.src('src/**/*.html')
.pipe(transform(
htmlSrcset({
width: [1, 720],
format: ['webp', 'jpg'],
}),
))
.pipe(gulp.dest('dist'))
})
<img srcset="image.jpg 1200w">
<img srcset="image.webp 1200w, image.jpg 1200w, image@720w.webp 720w, image@720w.jpg 720w">
htmlSrcSet({
width: [1, 720], // 1 is to generate an original sized image, the rest are image widths. Default is []
format: ['webp', 'jpg'], // The different image formats. Default is []
prefix: '@', // Default is '@'
postfix: 'w' // Default is 'w'
})