Not able to convert images to WebP using imagemin-webp

Question

I'm trying to convert more than one PNG and JPG file to WebP using imagemin-webp instead of using cwebp to convert one at a time, but it is not working for some reason.

Everything I've done so far:

1- I installed Node JS v10.16.0;

2- From inside my project i created the package.json file using the command: npm init -y;

3- Still within the directory of my project i ran the command npm install imagemin imagemin-webp;

4- Then i created a webp.js to hold the code that should convert the images and then i executed it with the node webp.js command.

Following is the code inside webp.js:

const imageminWebp = require('imagemin-webp');

imagemin(['_imgs/*.{jpg,png}'], '_imgs', {
   use: [
        imageminWebp({quality: 50})
    ]
}).then(() => {
    console.log('Images optimized');
});

I thought that once it was executed, all the files inside the _imgs folder would be converted to webp, but when I look inside the folder there are only the PNG and JPG files there.

When I run that code I get the message "Optimized image" but despite this, the WebP images are not generated.

Is there anything else i need to do to make it work?

Parrott

Answer 1

same problem here

try this:

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*.{jpg,png}'], {
  destination: __dirname + '/images/converted/',
  plugins: [
    imageminWebp({
      quality: 75,
      resize: {
        width: 1000,
        height: 0
      }
    })
  ]
}).then(() => {
  console.log('Images optimized');
});

you can leave out the resize portion of course;
if one part of the resize parameters is 0 it uses the original ratio (for 2:3 images if you enter 1000 it gets 1000x1500);

i still have no clue how to convert single images...
this is highly cryptic and not well documented despite having over 300k downloads per week on npm;

Vip

Thanks for the reply, that was really helpful! – Parrott

im using the module "sharp" now; way better! – Vip

Answer 2

Heres a short code that works like a charm, I found that implementing gulp-ext-replace helped rename the converted files. Run npm i -D gulp gulp-imagemin gulp-ext-replace imagemin-webp from your terminal inside the project directory then use the following code snippet below in your gulpfile.js

const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const extReplace = require("gulp-ext-replace");
const webp = require("imagemin-webp");

// Simple task to convert png to webp
gulp.task("images:webp", function() {
  const stream = gulp
    .src("./public/images/**/*.png")
    .pipe(
      imagemin({
        verbose: true,
        plugins: webp({ quality: 70 })
      })
    )
    .pipe(extReplace(".webp"))
    .pipe(gulp.dest("./public/images"));
  return stream;
});

Hope this helps you =)

Maegan

Answer 3

I had the same issue with the library. I was trying to convert around 10000 image for https://www.bestgift.in/order/cake/hyderabad.

Spent around 3 days but no luck in the end i used the cwebp library provided by google and it worked like charm

for file in *; do cwebp -q 80 "$file" -o "$file.webp"; done

For more information: https://developers.google.com/speed/webp

Beanpole