Не работает формат webp в HTML при сборке проекта

В папке build/img/photos есть картинки в формате webp, но в браузере отображается только альтернативный текс картинок. Вставка в HTML:

 <picture>
          <source type="image/webp" media="(min-width: 980px)" srcset="img/photos/[email protected] 1x, img/photos/[email protected] 2x">
          <source type="image/webp" media="(min-width: 660px)" srcset="img/photos/[email protected] 1x, img/photos/[email protected] 2x">
          <source type="image/webp" srcset="img/photos/[email protected] 1x, img/photos/[email protected] 2x">
          <source media="(min-width: 980px)" srcset="img/photos/[email protected], img/photos/[email protected] 2x">
          <source media="(min-width: 660px)" srcset="img/photos/[email protected], img/photos/[email protected] 2x">
          <img class="photos__main-img" src="img/photos/[email protected]" srcset="img/photos/[email protected] 2x"  alt="panorama photo">
 </picture>

Версия Node.js v12.16.1

pacage.json

    "devDependencies": {
    "@htmlacademy/editorconfig-cli": "1.0.0",
    "autoprefixer": "10.2.5",
    "browser-sync": "2.26.14",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-htmlmin": "^5.0.1",
    "gulp-libsquoosh": "^1.0.9",
    "gulp-plumber": "1.2.1",
    "gulp-postcss": "9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "4.1.0",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-terser": "^2.0.1",
    "gulp-w3c-html-validator": "^5.1.0",
    "gulp-webp": "^4.0.1",
    "postcss": "^8.3.6",
    "postcss-csso": "^5.0.1",
    "postcss-import": "^14.0.2",
    "postcss-scss": "^4.0.2",
    "postcss-url": "^10.1.3",
    "stylelint": "13.13.1",
    "stylelint-config-htmlacademy": "0.1.10"
  },
  "scripts": {
    "editorconfig": "editorconfig-cli",
    "stylelint": "stylelint \"source/sass/**/*.scss\" --syntax scss",
    "test": "npm run editorconfig && npm run stylelint && w3c-html-validator source",
    "build": "gulp build",
    "start": "gulp"
  },
  "browserslist": [
    "last 2 versions",
    "not dead",
    "not ie <= 11"
  ],
  "editorconfig-cli": [
    "*.json",
    "*.js",
    "source/*.html",
    "source/js/**/*.js",
    "source/img/**/*.svg",
    "source/sass/**/*.scss"
  ],
  "engines": {
    "node": "^12 || ^14"
  },
  "dependencies": {}
}

gulpfile.js

const gulp = require("gulp");
const plumber = require("gulp-plumber");
const sass = require("gulp-sass");
const csso = require("postcss-csso");
const postcss = require("gulp-postcss");
const postcssUrl = require("postcss-url");
const postcssImport = require("postcss-import");
const postScss = require("postcss-scss");
const autoprefixer = require("autoprefixer");
const sync = require("browser-sync").create();
const rename = require("gulp-rename");
const htmlmin = require("gulp-htmlmin");
const terser = require("gulp-terser");
const squoosh = require("gulp-libsquoosh");
const webp = require("gulp-webp");
const svgSprite = require("gulp-svg-sprite");
const del = require("del");


// Styles

const styles = () => {
  return gulp.src("source/sass/*.scss", { sourcemaps: true })
    .pipe(plumber())
    .pipe(postcss([
      postcssImport(),
      postcssUrl(),
    ],{syntax: postScss}))
    .pipe(sass())
    .pipe(postcss([
      autoprefixer(),
      csso()
    ]))
    .pipe(
      rename({extname: ".min.css"
      })
    )
    .pipe(gulp.dest("build/css",{sourcemaps: "."}))
    .pipe(sync.stream());
}

exports.styles = styles;

// HTML

const html = ()=>{
  return gulp.src("source/*.html")
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest("build"));
}

exports.html = html;

// Scripts

const scripts = ()=> {
  return gulp.src("source/js/*.js")
    .pipe(terser())
    .pipe(
      rename({
        extname: ".min.js"
      })
    )
    .pipe(gulp.dest("build/js"))
    .pipe(sync.stream());
}

exports.scripts = scripts

// Images

const optimizeImages=()=> {
  return gulp.src("source/img/**/*.{png,jpg}")
    .pipe(squoosh())
    .pipe(gulp.dest("build/img"))

}

exports.optimizeImages = optimizeImages;

const copyImages = () => {
  return gulp.src("source/img/**/*.{png,jpg}")
    .pipe(gulp.dest("build/img"))
}

exports.images = copyImages;

// Webp

const createWebp = () => {
  return gulp.src("source/img/**/*.{jpg,png}")
    .pipe(webp({quality: 90}))
    .pipe(gulp.dest("build/img"))
}

exports.createWebp = createWebp;

//Sprites

const sprite = () => {
  return gulp.src("source/img/icons/*.svg")
    .pipe(svgSprite({
      mode: {
        stack: {
          sprite: "../sprite.svg"
        }
      },
    }
    ))
    .pipe(gulp.dest("build/img/icons"));
}

exports.sprite = sprite;

//Copy

const copy = (done)=>{
  gulp.src([
    "source/fonts/*.{woff2,woff}",
    "source/*.ico",
    "source/img/**/*.svg",
    "source/img/favicons",
    "source/manifest.webmanifest"
   ], {
    base: "source"
  })
    .pipe(gulp.dest("build"))
  done();
}

exports.copy = copy;

//clean

const clean = () => {
    return del("build")
};

exports.clean = clean;

// Server

const server = (done) => {
  sync.init({
    server: {
      baseDir: 'build'
    },
    cors: true,
    notify: false,
    ui: false,
  });
  done();
}

exports.server = server;

//Reload

const reload = (done) => {
  sync.reload();
  done();
}

// Watcher

const watcher = () => {
  gulp.watch("source/sass/**/*.scss", gulp.series(styles));
  gulp.watch("source/js/*.js",gulp.series(scripts, reload))
  gulp.watch("source/*.html",gulp.series(html, reload));
  gulp.watch("source/img/**/*.svg", gulp.series(sprite,reload))
}

// Build

const build = gulp.series(
  clean,
  copy,
  optimizeImages,
  gulp.parallel(
    styles,
    html,
    scripts,
    sprite,
    createWebp
  ),
);

exports.build = build;

//Default

exports.default = gulp.series(
  clean,
  copy,
  copyImages,
  gulp.parallel(
    styles,
    html,
    scripts,
    sprite,
    createWebp
  ),
  gulp.series(
    server,
    watcher
  )
);