Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Not able to convert images to WebP using imagemin-webp

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?

like image 288
Fb16455 Avatar asked Jul 08 '19 19:07

Fb16455


People also ask

How do I save an image as a WebP?

To export an image to WebP, select a resource on the canvas, open the Export panel on the right hand side, and choose “WEBP” in the format dropdown. After you make your selection, click the Export Bitmap… button. The resulting dialog will predictably ask where you want the image to be exported to.

How do I convert a file to WebP?

Right click on an image file or a folder containing a number of images files, and then click Convert to WebP. The Converting Images to WebP dialog opens. The default settings depend on the minSdkVersion setting for the current module. Select either lossy or lossless encoding.


1 Answers

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;

like image 153
firstdorsal Avatar answered Sep 20 '22 14:09

firstdorsal