How to automate the conversion of background images enclosed in a tag in HTML using GULP to WebP format and HTML itself?

Question

HTML

The task is as follows:

There is HTML in which styles are written inline, more precisely, the background is specified using the "background-image" property with an image format other than WebP. How to make sure that GULP inserts the appropriate attributes into HTML after processing, images of the original file format and in WebP format, and also that it is packaged in the same tag

Answer 1

Piece of my assembly

const webp = require("gulp-webp");

  gulp.task("webp", function () {
    return gulp.src("source/img/**/*.{jpg,jpeg,svg}")
      .pipe(webp({quality: 50}))
      .pipe(gulp.dest("app/img"));
  });

Answer 2

as an option, you can do a "redirect" on the server: if the server does not find the file /assets/images/img.webp, then it passes the file name to the webp.php script, which takes the source file /assets/images/img.(jpg|png) creates from /assets/images/img.webp and displays to the user. similarly still miniatures are often formed.