gulp-avif-webp-css

Replace background image to avif or webp if supports.

Example

// Input
.body{
    background-image: url("/img/bannerbg.jpg");
}

// Output
.body{
    background-image: url("/img/bannerbg.jpg");
}
@supports (-webkit-appearance:none){
    .body {
        background-image: url("/img/bannerbg.webp");
        }
    .body {
        background-image: url("/img/bannerbg.avif");
    }
}

Install

npm i gulp-avif-webp-css -D

Add in to your gulpfile.js

const gulp = require('gulp');
const avifwebpCss = require('gulp-avif-webp-css');

function styles(){
    return src('./css/*.css')
        .pipe(avifwebpCss()) // or .pipe(avifwebpCss(['.jpg','.jpeg']))
        .pipe(gulp.dest('./public/css/'))
};