为什么您应该关注？
未压缩的图片会因为不必要的字节而使网页膨胀。由于图片可能是 Largest Contentful Paint (LCP) 的候选对象，因此这些不必要的字节会增加图片的资源加载时长，可能会导致 LCP 时间延长。
右侧照片比左侧照片小 40%，但看起来可能与普通用户完全相同。
|
|
|
|---|
测量
运行 Lighthouse，以检查是否有机会通过压缩图片来提升页面加载速度。 “对图片高效编码”下列出了这些优化建议：
映像
Imagemin 是图片压缩的理想选择，因为它支持 多种映像格式，并且可以与构建脚本和构建 工具。Imagemin 可作为 CLI 和 npm 模块。通常，npm 模块是 这是最佳选择，因为它提供更多配置选项， 如果您想在不更改任何代码的情况下试用 Imagemin，是一个不错的选择。
插件
Imagemin 是围绕“插件”构建的。插件是一种 npm 软件包， 特定图片格式（例如“mozjpeg”压缩 JPEG）。热门图片格式 可能有多个插件可供选择
选择插件时要考虑的最重要的一点是，插件是否 “有损”也就是“无损”。在无损压缩中，不会丢失任何数据。有损 压缩会减小文件大小，但代价是可能会减小图像 质量。如果插件未提及其是否为“有损”即“无损”您 可以通过 API 判断：如果您能指定输出的图像质量， 是“有损”。
对于大多数人来说，有损插件是最佳选择。它们提供 可进一步缩减文件大小 满足您的需求下表列出了常用的 Imagemin 插件。并不是只有这些插件 但它们都适合您的项目。
| 图片格式 | 有损插件 | 无损插件 |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | 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 模块
如果您使用上述构建工具 查看适用于 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);
})();