为什么您应该关注?
未经压缩的图片会使网页充斥着不必要的字节。由于图片可能是 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);
})();