使用 Imagemin 压缩图片

使用合集保持井井有条 根据你的偏好保存内容并进行分类。

Katie Hempenius

为何你应该关注？

未压缩的图片会用不必要的字节来膨胀你的页面。由于图片可能是最大内容渲染 (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 有很好的支持。你可以通过此代码实验室了解有关如何在 webpack 中使用 Imagemin的更多信息。

你也可以单独使用 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);
})();