无法使用 imagemin-webp 将图像转换为 WebP

Question

我正在尝试使用 imagemin-webp 将多个 PNG 和 JPG 文件转换为 WebP，而不是使用 cwebp 一次转换一个，但它不起作用出于某种原因。

到目前为止我所做的一切：

1- 我安装了 Node JS v10.16.0;

2- 在我的项目中，我使用以下命令创建了 package.json 文件： npm init -y;

3- 仍在我的项目目录中运行命令 npm install imagemin imagemin-webp;

4- 然后我创建了一个 webp.js 来保存应该转换图像的代码，然后我用 node webp.js 命令执行它。

下面是里面的代码webp.js:

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

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

本以为执行完后，_imgs文件夹下的所有文件都会被转为webp，结果一看文件夹里面只有PNG和JPG文件。

当我运行该代码时，我收到消息 "Optimized image" 但尽管如此，仍未生成 WebP 图像。

我还需要做些什么才能让它发挥作用吗？

Answer 1

同样的问题

试试这个：

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');
});

你当然可以省略调整大小的部分；
如果调整大小参数的一部分是 0，它使用原始比例（对于 2:3 图片，如果你输入 1000，它会得到 1000x1500）；

我仍然不知道如何转换单个图像...
尽管在 npm 上每周有超过 30 万次下载，但这是非常神秘的并且没有很好的记录；

Answer 2

我在图书馆遇到了同样的问题。我试图为 https://www.bestgift.in/order/cake/hyderabad 转换大约 10000 张图像。

花了大约 3 天，但最终没有运气，我使用了 google 提供的 cwebp 库，它工作得很好

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

更多信息：https://developers.google.com/speed/webp

Answer 3

这是一个非常有用的短代码，我发现实现 gulp-ext-replace 有助于重命名转换后的文件。运行 npm i -D gulp gulp-imagemin gulp-ext-replace imagemin-webp 从您的终端进入项目目录，然后在您的 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;
});

希望对你有帮助=)

无法使用 imagemin-webp 将图像转换为 WebP

Not able to convert images to WebP using imagemin-webp

node.js

webp

imagemin