我正在尝试使用 imagemin-webp 将多个 PNG 和 JPG 文件转换为 WebP,而不是使用cwebp一次转换一个,但由于某种原因它不起作用。
到目前为止,我所做的一切:
1-我安装了节点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 文件。
当我运行该代码时,我收到消息"优化图像",但尽管如此,WebP 图像仍未生成。
我还需要做些什么来使其工作吗?
同样的问题
在这里试试这个:
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 上的下载量超过 300k,但没有很好的记录;
这是一个像魅力一样工作的短代码,我发现实现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;
});
希望这对你有帮助=)
我在库上遇到了同样的问题。我试图为 https://www.bestgift.in/order/cake/hyderabad 转换大约 10000 张图像。
花了大约 3 天,但最后没有运气,我使用了谷歌提供的 cwebp 库,它就像魅力一样工作
for file in *; do cwebp -q 80 "$file" -o "$file.webp"; done
有关更多信息:https://developers.google.com/speed/webp