function html() {
return src('source/*.html')
.pipe(pictureHTML())
.pipe(gulp.dest('dist/'))
}
exports.html = html;
`
$3
`js
// …
.pipe(pictureHTML(
// options below default:
{
extensions : ['.jpg', '.png', '.jpeg'], // image file extensions for which we create 'picture'
source : ['.avif', '.webp'], // create 'source' with these formats
noPicture : ['no-picture'], // if we find this class for the 'img' tag, then we don't create a 'picture' (multiple classes can be set)
noPictureDel : false // if 'true' remove classes for 'img' tag given in 'noSource:[]'
}
))
//...
`
Example
$3
`html
`
$3
`html
`
$3
For now, you can still use the format in it's almost complete glory with the native element in HTML. Why, you may ask? Well, the element allows progressive support. You can simply drop all image files in the order in which you want to load them. Your visitors' browsers load only one image at a time, which reduces the load on the server. Besides, you don't need a script to process multiple images.
Currently 97% of browsers support thepicture element`
✔ Does not download more than one image at a time
✔ Native support for selecting the most appropriate image
✔ 97% browser support and automatic fallback
✔ Getting this implemented is easy and straightforward