Чтобы избавиться от черных пикселей при прозрачном фоне при использовании плагина gulp-webp, вам нужно задать дополнительные параметры обработки изображений.
```javascript
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('webp', () =>
gulp.src('src/images/*.{png,jpg}')
.pipe(webp({
lossless: true, // сохранение качества изображения без потери
lossy: false, // отключение сжатия с потерями
alphaQuality: 100, // установка качества альфа-канала в 100
method: 6 // использование лучшего метода для сохранения изображений
}))
.pipe(gulp.dest('dist/images'))
);
```
В этом примере мы используем следующие параметры:
- `lossless: true` - это позволяет сохранить качество изображения без потерь;
- `lossy: false` - отключает сжатие с потерями и сохраняет изображение с наилучшим качеством;
- `alphaQuality: 100` - устанавливает качество альфа-канала в 100, что помогает сохранять прозрачность без добавления черных пикселей;
- `method: 6` - использует лучший метод для сохранения изображений.
Установите эти параметры для плагина gulp-webp и повторите обработку ваших изображений. Теперь вы должны получить преобразованные изображения с сохраненными прозрачными фонами без черных пикселей.