Skip to content
学习 衡量 博客 Case studies 关于
本页内容
  • 措施
  • Imagemin
    • 插件
    • Imagemin CLI
    • Imagemin npm 模块

使用 Imagemin 压缩图像

Nov 5, 2018 — 更新日期 Apr 6, 2020
Available in: Español, 日本語, 한국어, Português, Русский, English
Appears in: 快速加载
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
本页内容
  • 措施
  • Imagemin
    • 插件
    • Imagemin CLI
    • Imagemin npm 模块

为什么要关注这一问题? #

未压缩的图像会因不必要的字节使页面膨胀。右边的这张照片比左边的这张小 40%,但对于普通用户来说可能看起来一样。

20 KB

12 KB

措施 #

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

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

Imagemin #

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

插件 #

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

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

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

图像格式有损插件无损插件
JPEGimagemin-mozjpegimagemin-jpegtran
PNGimagemin-pngquantimagemin-optipng
GIFimagemin-giflossyimagemin-gifsicle
SVGImagemin-svgo
WebPimagemin-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 查看 Imaginemin 的代码实验室。

您还可以将 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);
})();
性能
Last updated: Apr 6, 2020 — Improve article
Codelabs

See it in action

Learn more and put this guide into action.

  • Using Imagemin with webpack
  • Using Imagemin with Gulp
  • Using Imagemin with Grunt
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.