gulp-web-images-css

This is a modified version of the plugin gulp-avif-css. Generates additional expressions with .webp & .avif classes and appropriate extension.

Install

Install gulp-web-images-css as a development dependency:

npm i -D gulp-web-images-css

Options

Type: object

mode

Type: string
Default: all
Possible values:

• «avif» — Add only support «AVIF»
• «webp» — Add only support «Webp»
• «all» — Add support «AVIF» and «Webp»

localMode

Type: boolean
Default: true

Make only local paths.

unregister

Type: boolean
Default: true

Do not distinguish between lowercase and uppercase letters in extensions

avifClass

Type: string
Default: avif

Sets a class for AVIF-picture

webpClass

Type: string
Default: webp

Sets a class for Webp-picture

extensions

Type: array
Default: ['png', 'jpg', 'jpeg']

Expansion subject to processing.

Usage

Add it to your gulpfile.js

const gulp = require("gulp");
const webImagesCSS = require("gulp-web-images-css");

gulp.src("./src/css/*.css").pipe(webImagesCSS()).pipe(gulp.dest("./dist"));

or

const gulp = require("gulp");
const webImagesCSS = require("gulp-web-images-css");

gulp
   .src("./src/css/*.css")
   .pipe(webImagesCSS({mode: "all"}))
   .pipe(gulp.dest("./dist"));

Include special plugin adds .avif and .webp classes to body (if it supports) into your JavaScript file (add it into head tag)

import "gulp-web-images-css/plugin";

Examples

Input:

.box {
   background-image: url("image.png");
}

Output:

.box {
   background-image: url("image.png");
}

.webp .box {
   background-image: url("image.webp");
}

.avif .box {
   background-image: url("image.avif");
}