使用 Imagemin 压缩图片

Katie Hempenius

为什么您应该关注？

未压缩的图片会因为不必要的字节而使网页膨胀。由于图片可能是 Largest Contentful Paint (LCP) 的候选对象，因此这些不必要的字节会增加图片的资源加载时长，可能会导致 LCP 时间延长。

右侧照片比左侧照片小 40%，但看起来可能与普通用户完全相同。

测量

运行 Lighthouse，以检查是否有机会通过压缩图片来提升页面加载速度。 “对图片高效编码”下列出了这些优化建议：

映像

Imagemin 是图片压缩的理想选择，因为它支持 多种映像格式，并且可以与构建脚本和构建 工具。Imagemin 可作为 CLI 和 npm 模块。通常，npm 模块是 这是最佳选择，因为它提供更多配置选项， 如果您想在不更改任何代码的情况下试用 Imagemin，是一个不错的选择。

插件

Imagemin 是围绕“插件”构建的。插件是一种 npm 软件包， 特定图片格式（例如“mozjpeg”压缩 JPEG）。热门图片格式 可能有多个插件可供选择

选择插件时要考虑的最重要的一点是，插件是否 “有损”也就是“无损”。在无损压缩中，不会丢失任何数据。有损 压缩会减小文件大小，但代价是可能会减小图像 质量。如果插件未提及其是否为“有损”即“无损”您 可以通过 API 判断：如果您能指定输出的图像质量， 是“有损”。

对于大多数人来说，有损插件是最佳选择。它们提供 可进一步缩减文件大小 满足您的需求下表列出了常用的 Imagemin 插件。并不是只有这些插件 但它们都适合您的项目。

Imagemin CLI

Imagemin CLI 支持 5 个不同的插件：imagemin-gifsicle、 imagemin-jpegtran、imagemin-optipng、imagemin-pngquant 和 imagemin-svgo。 Imagemin 会根据 输入。

要压缩“images/”中的图片，并将其保存到同一个 目录中，请运行以下命令（覆盖原始文件）：

$ imagemin images/* --out-dir=images

Imagemin npm 模块

如果您使用上述构建工具 查看适用于 Imagemin 的 Codelab， webpack、gulp、 或发出哼哼声。

您也可以单独使用 Imagemin 作为 Node 脚本。 此代码使用“imagemin-mozjpeg”用于将 JPEG 文件压缩为 （50 分，总分是 50 分，其中 0 分表示最差，100 分表示最佳）：

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();