使用 Imagemin 压缩图片

Katie Hempenius

为什么您应该关注？

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

右侧的照片比左侧的照片小 40%，但对于普通用户来说，它们看起来可能完全相同。

测量

运行 Lighthouse，检查是否有机会通过压缩图片来缩短网页加载时间。 这些机会列在“高效编码图片”下：

Imagemin

Imagemin 是图片压缩的绝佳选择，因为它支持多种图片格式，并且可以轻松地与构建脚本和构建工具集成。Imagemin 可以作为 CLI 和 npm 模块使用。一般来说，npm 模块是最佳选择，因为它提供了更多配置选项，但如果您想在不触及任何代码的情况下试用 Imagemin，CLI 也是不错的替代方案。

插件

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 与捆绑器搭配使用，请检查您选择的捆绑器是否有可用的插件。例如，webpack 是一款热门的捆绑器，对 Imagemin 的支持非常出色。如需详细了解如何将 Imagemin 与 webpack 搭配使用，请参阅此 Codelab。

您还可以将 Imagemin 作为 Node 脚本单独使用。 此代码使用“imagemin-mozjpeg”插件将 JPEG 文件压缩到质量为 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);
})();