Aini99
@Aini99

未压缩的图像会用不必要的字节使页面膨胀。右侧的照片比左侧的照片小 40%,但看起来可能与普通用户相同。

imgimg
20 KB12 KB

检查

运行 Lighthouse 以检查通过压缩图像提高页面加载的机会。这些机会列在 "高效编码图像" 下:

运行 Lighthouse 以检查通过压缩图像提高页面加载的机会

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 个不同的插件一起使用:图像明 - gifsicle、Imagemin-jpegtran、Imagemin-optipng、Imagemin-pngquant 和 imagemin-svgo。Imagemin 根据输入的图像格式使用相应的插件。

要压缩 "images/" 目录中的图像并将其保存到同一个目录,请运行以下命令(覆盖原始文件):

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

Imagemin npm 模块

如果你使用这些构建工具之一,请使用 Imaginemin 的 webpack、gulp 或 grunt 代码库。

还可以单独使用 Imagemin 作为 Node 脚本。这段代码使用“imagem -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);
})();
2020 年 11 月 12 日 · 14:51
84
0
0
发表留言

使用 Imagemin 压缩图像文件
扫描右侧二维码继续阅读
November 12, 2020
Aini99
by yoniu.

Aini99