使用 Imagemin 压缩图片

Katie Hempenius
Katie Hempenius

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

右侧的照片比左侧的照片小了 40%,但对普通用户来说,两张照片看起来可能完全一样。

20 KB

12 KB

测量

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

图片

Imagemin

Imagemin 非常适合压缩图片,因为它支持各种图片格式,并且易于与构建脚本和构建工具集成。Imagemin 可作为 CLInpm 模块提供。通常,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 提供很好的支持。您可以详细了解如何在此 Codelab 中将 Imagemin 与 webpack 搭配使用

您也可以将 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);
})();