Как убрать в gulp-webp черные пиксели в прозрачный фон?

Чтобы убрать черные пиксели при конвертации изображений в формат webp с использованием Gulp.js, вам понадобится добавить дополнительный параметр при вызове плагина gulp-webp.

Во-первых, убедитесь, что у вас установлен плагин gulp-webp из npm, добавив его в зависимости вашего проекта:

npm install --save-dev gulp-webp

Затем добавьте следующий код в ваш файл gulpfile.js:

const gulp = require('gulp');
const webp = require('gulp-webp');
const imagemin = require('gulp-imagemin');
const flatten = require('gulp-flatten');

gulp.task('convertWebp', function () {
  return gulp.src('src/images/**/*.+(jpeg|jpg|png)')
    .pipe(imagemin()) // минимизировать изображения перед конвертацией
    .pipe(webp({
      quality: 80, // установите желаемое качество конвертации
      preset: 'lossless', // используйте "lossless" для без потерь или "default" для потерь
      alphaQuality: 80, // качество прозрачности webp (от 0 до 100)
      method: 6, // метод конвертации (от 0 до 6)
      filter: 0 // фильтр конвертации (от 0 до 6)
    }))
    .pipe(gulp.dest('dist/images')); // установите путь каталога назначения
});

Пример выше:

1. Определяет задачу Gulp convertWebp.
2. Выбирает все изображения в каталоге src/images с расширениями .jpeg, .jpg и .png.
3. Применяет плагин gulp-imagemin для минимизации изображений (это необязательно, но рекомендуется перед конвертацией).
4. Применяет плагин gulp-webp с определенными параметрами, включая качество, предустановку, качество прозрачности, метод конвертации и фильтр.
5. Сохраняет преобразованные изображения в каталоге dist/images.

Вы можете настроить эти параметры в соответствии со своими требованиями. Когда вы будете запускать задачу convertWebp в Gulp, он выполнит конвертацию изображений в формат webp и уберет черные пиксели в прозрачный фон (если они есть).

Надеюсь, это помогает! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.