Generates additional
.webp&.avifclasses for loading a specific image if it's supported by the browser
Install gulp-avif-css:
npm install -D gulp-avif-cssAdd it to your gulpfile.js
const gulp = require("gulp")
const avifcss = require("gulp-avif-css")
gulp.src("./src/css/*.css")
.pipe(avifcss())
.pipe(gulp.dest("./dist"))Include the special plugin which adds .avif and .webp classes for <body> (if it's supported) into a JavaScript file and load it in <head> tag
import "gulp-avif-css/plugin".box {
background-image: url("image.png");
}.box {
background-image: url("image.png");
}
.webp .box {
background-image: url("image.webp");
}
.avif .box {
background-image: url("image.avif");
}Type: Array
Default: ["png", "jpg", "jpeg", "JPG", "JPEG"]
Sets extensions that are going to be targeted by the plugin