CLONE CODING

图像优化：在Node.js中转换并压缩PNG，JPG为WebP

CloneCoding
Web / Node.js
2023年7月15日

数字时代将图像置于我们的浏览体验前沿。然而，问题在于这些图像往往占用大量带宽，影响网站的性能。我们可以通过一种称为图像优化的过程来减小图像尺寸。在本文中，我们将探讨如何使用Node.js将PNG和JPG等图像文件转换为WebP并进行压缩。

为什么选择WebP？

WebP是由Google开发的现代图像格式，为Web图像提供了优质的无损和有损压缩。通过将PNG和JPG文件转换为WebP，我们可以实现更小的文件大小，同时不损坏图像质量，从而使我们的网站加载速度更快。

设置Node.js

在开始转换过程之前，请确保已安装Node.js。如果尚未安装，请根据您的操作系统下载并安装。

安装所需模块

我们将使用两个npm包：sharp用于图像转换，imagemin-webp用于图像压缩。

bash

npm install sharp imagemin imagemin-webp

将图像转换为WebP

让我们使用sharp模块将PNG或JPG图像转换为WebP。这是通过读取输入文件并将其转换为WebP格式来完成的。

javascript

const sharp = require('sharp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => console.log('图像转换完成。'))
  .catch(err => console.error(err));

压缩WebP图像

接下来，让我们使用imagemin-webp模块压缩转换后的WebP图像。

javascript

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

(async () => {
  await imagemin(['output.webp'], {
    destination: 'compressed_images',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });

  console.log('图像压缩完成。');
})();

完整代码

javascript

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

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => {
    (async () => {
      await imagemin(['output.webp'], {
        destination: 'compressed_images',
        plugins: [
          imageminWebp({quality: 50})
        ]
      });

      console.log('图像转换和压缩完成。');
    })();
  })
  .catch(err => console.error(err));