为什么要关注短视频？
未经压缩的图片会使网页充斥着不必要的字节。由于图片可能是 Largest Contentful Paint (LCP) 的候选，因此这些不必要的字节会增加不必要的资源加载时间，从而导致 LCP 时间变长。
右边的照片比左边的照片小 40%，但可能看起来和普通用户一样。
|
|
|
|---|
测量
运行 Lighthouse，看看是否有机会通过压缩图片来提高网页加载速度。 这些优化建议列在“高效对图片编码”下：
映像
Imagemin 是图片压缩的绝佳选择，因为它支持多种图片格式，并且可以与构建脚本和构建工具轻松集成。Imagemin 既可作为 CLI 提供，也可作为 npm 模块提供。通常，npm 模块是最佳选择，因为它提供了更多配置选项，但如果您想在不处理任何代码的情况下试用 Imagemin，则 CLI 是一个不错的替代方法。
插件
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 模块
如果您使用的是上述构建工具之一，请使用 webpack、gulp 或 grunt 查看 Imagemin 的 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);
})();