你为什么要关心？

未压缩的图像会用不必要的字节使页面膨胀。两张一样的图片，一张经过压缩，另一张没经过压缩，但对于普通用户来说可能看起来是一样的。所以经过压缩的图片会有优势。



测量

运行 Lighthouse 以检查通过压缩图像来改善页面加载的机会。这些机会列在“有效编码图像”下：

3-3 使用Imagemin压缩图片_文件大小



Lighthouse 目前仅报告以 JPEG 格式压缩图像的机会。



图像最小

Imagemin 是图像压缩的绝佳选择，因为它支持多种图像格式，并且很容易与构建脚本和构建工具集成。Imagemin 可用作​​CLI​​​和​​npm 模块​​。一般来说，npm 模块是最好的选择，因为它提供了更多的配置选项，但如果你想在不接触任何代码的情况下尝试 Imagemin，CLI 可能是一个不错的选择。

插件

Imagemin 是围绕“插件”构建的。插件是压缩特定图像格式的 npm 包（例如“mozjpeg”压缩 JPEG）。流行的图像格式可能有多个插件可供选择。

选择插件时要考虑的最重要的事情是它是“有损”还是“无损”。在无损压缩中，不会丢失任何数据。有损压缩可减小文件大小，但可能会降低图像质量。如果插件没有提及它是“有损”还是“无损”，您可以通过其 API 判断：如果您可以指定输出的图像质量，那么它就是“有损”。

对于大多数人来说，有损插件是最好的选择。它们显着节省了文件大小，您可以自定义压缩级别以满足您的需求。下表列出了流行的 Imagemin 插件。这些不是唯一可用的插件，但它们都是您项目的不错选择。




图像格式

有损插件

无损插件

JPEG格式

​​imagemin-mozjpeg​​

​​imagemin-jpegtran​​

PNG

​​imagemin-pngquant​​

​​imagemin-optipng​​

动图

​​imagemin-giflossy​​

​​imagemin-gifsicle​​

SVG

​​Imagemin-svgo​​

网页版

​​imagemin-webp​​


Imagemin CLI 

Imagemin CLI 使用 5 个不同的插件：imagemin-gifsicle、imagemin-jpegtran、imagemin-optipng、imagemin-pngquant 和 imagemin-svgo。Imagemin 根据输入的图像格式使用适当的插件。

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

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

Imagemin npm 模块

如果您使用的这些构建工具，结账离开codelabs为Imaginemin用的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);
})();