Webp

Изображения находящиеся в директории source/images/ с форматами .gif, .jpg, .jpeg, .png конвертируются в формат .webp

При использовании шаблона с флагом --build webp изображения сжимаются плагином imagemin-webp.

Использование в HTML

В HTML webp изображения импортируются через элемент picture:

<picture>
    <source srcset="./images/image.webp" type="image/webp">
    <img src="./images/image.jpg">
  </picture>

Использование в CSS

Через CSS так же можно импортировать webp изображения, воспользовавшись „хаком“:

.image {
  background-image: url("./../images/image.jpg");
}

@supports (-webkit-appearance: none) {
  .image {
    background-image: url("./../images/image.webp");
  }
}

Разбор imagesWebp из gulpfile.js

const paths = { // Объявляем переменную путей
  imagesWebp: { // Объединяем пути webp изображений
    source: './source/images/*.{gif,jpg,jpeg,png}', // Задаём путь исходных изображений
    build: './build/images/', // Задаём путь для готовых webp изображений
    watch: './source/images/*.{gif,jpg,jpeg,png}' // Задаём путь для просмотра изменений
  }
}

function imagesWebp() { // Объявляем функцию imagesWebp
  return gulp.src(paths.imagesWebp.source) // Указываем путь исходных изображений
    .pipe(newer({ // Берём только те изображения, которые отличаются от изображений ...
      dest: paths.imagesWebp.build, // ... находящихся в директории build ...
      ext: '.webp' // ... имеющих расширение webp
    }))
    .pipe(webp(gulpIf(argv.build, imageMin([ // При использовании шаблона с флагом --build, активируем плагин imagemin ...
      imageMinWebp({ // ... и плагин webp для imagemin
        alphaQuality: 70, // Устанавливаем качество сжатия прозрачности
        lossless: true, // Включаем кодирование изображений без потерь
        method: 6, // Устанавливаем метод сжатия
        quality: 70 // Устанавливаем коэффициент качества сжатия
      })
    ]))))
    .pipe(debug({ // Сообщение в консоли
      title: 'ImagesWebp:' // Задаём сообщение
    }))
    .pipe(gulp.dest(paths.imagesWebp.build)); // Указываем путь вывода
}