gulp-webp-avif-html
v1.0.1
Published
> Gulp extension, replace html element `<img>` to `<picture>` with [`gulp-webp-avif-html`](https://github.com/TiroZit/gulp-webp-avif-html/)
Downloads
1
Readme
gulp-webp-avif-html - fork gulp-webp-html-nosvg
Gulp extension, replace html element
<img>
to<picture>
withgulp-webp-avif-html
Install
$ npm i --save-dev gulp-webp-avif-html
Usage
Use this into your gulpfile.js
:
const gulp = require('gulp')
const webpAvifHTML = require("gulp-webp-avif-html")
function html() {
return src('source/*.html')
.pipe(webpAvifHTML())
.pipe(gulp.dest('dist/'))
}
exports.html = html;
Example
// Input
<img src="img/image.jpg" alt="image">
// Output
<picture>
<source srcset="img/image.avif" type="image/avif">
<source srcset="img/image.webp" type="image/webp">
<img src="img/image.jpg" alt="image">
</picture>
Support file extensions: .png, .jpg, .jpeg
The picture element
For now, you can still use the format in its almost complete glory with the native <picture>
element in HTML. Why, you may ask? Well, the <picture>
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 96.5% of browsers support the picture element
✔ Does not download more than one image at a time
✔ Native support for selecting the most appropriate image
✔ 96% browser support and automatic fallback
✔ Getting this implemented is easy and straightforward