CODEWITHSUNDEEP
imagegulptransparencywebp
Linas M.
Linas M.

Reputation: 332

gulp-webp converts images with a black background. How to convert to a fully transparent background?

I am using gulp-webp to convert png images to webp format. Everything works smoothly and all images get converted depending on the quality settings I insert. Except the background. Images converted to webp always posses a black background. I tried playing with alphaQuality channel by setting the quality from 100 to a lower one. It does not show any changes.

Here is my gulpfile.js:

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

const { src, dest, watch, series, parallel, task } = require("gulp");

const themename = "portfolio",
  Root = `../../${themename}`;

const sources = {
  src: `${Root}/src/`,
  scss: `${Root}/src/scss/`,
  js: `${Root}/src/js/`,
  img: `${Root}/src/img/`,
  webfonts: `${Root}/src/webfonts/`
};
const distribution = {
  dist: `${Root}/dist/`,
  css: `${Root}/dist/css/`,
  js: `${Root}/dist/js/`,
  img: `${Root}/dist/img/`,
  webfonts: `${Root}/dist/webfonts/`
};

const webpConvert = () => {
  return src(`${sources.img}**`)
    .pipe(webp({}))
    .pipe(dest(distribution.img));
}

task("webpConvert", webpConvert);

I would appreciate any kind of advice how to convert webp with transparent background.

Upvotes: 1

Views: 1334

Answers (1)

Linas M.
Linas M.

Reputation: 332

I am answering my own question. Maybe I will save someone from confusion I had. As you can see in the code above I instructed webpConvert function to convert all the files in the img folder to webp:

const webpConvert = () => {
  return src(`${sources.img}**`)
    .pipe(webp({}))
    .pipe(dest(distribution.img));
}

The catch was that I already had some webp images that I converted manually earlier in my scr/img folder. So gulp-webp plugin took those webp images and double-made them into webp. This had obscured the alpha channel. Make sure, you don't have any webp images in your source folder if you are using this plugin or at least instruct the function not to convert them again.

Upvotes: 1

Related Questions