由于网络的快速发展，图像与视频已经成为如今网络传输中最常见的内容。而其中的 JPEG 格式也因为其高压缩率和广泛可用性成为最常见的图像格式之一。不过，JPEG 格式在压缩的同时也容易出现画质损失的情况。为解决这个问题，可以使用 npm 包 imagemin-jpeg-recompress。
什么是 imagemin-jpeg-recompress？
imagemin-jpeg-recompress 是 imagemin 的插件之一，它可以通过指定压缩选项来优化 JPEG 图像的质量。它使用了一种更优秀的算法，通过改变基于 DCT 的编码方式来避免出现人眼可见的 JPEG 块状失真，而且压缩的同时并不会对图片的质量造成太大的影响。
具体来说，imagemin-jpeg-recompress 可以实现以下功能：
- 采用最新的更高阶的实时欺骗模型来测量人眼的感知差异。
- 使用两阶段压缩，可以再次压缩经过初步压缩的文件，以达到更小的文件大小。
- 可以添加可选的图片注释。
如何使用 imagemin-jpeg-recompress？
使用 imagemin-jpeg-recompress 要求先安装 imagemin，因为它是 imagemin 的插件。在开始使用前，需要使用以下命令安装这两个包：
npm install --save imagemin imagemin-jpeg-recompress
安装完成后，在需要使用 imagemin-jpeg-recompress 的代码中，先使用以下语句引入 imagemin 和 imagemin-jpeg-recompress：
const imagemin = require('imagemin');
const imageminJpegRecompress = require('imagemin-jpeg-recompress');然后，我们可以通过以下步骤来使用 imagemin-jpeg-recompress：
- 选择需要压缩的图片。
-- -------------------- ---- -------
----- ----- - ----- -------------------------- -
------------ ---------------
-------- -
------------------------
-- ------
-------- -------
---- ---
---- ---
------------ ----- -- ----
------- ----------
------ --
------------ -----
------------ -------
--
-
---上述代码中，我们通过指定源文件的路径 images/*.jpg，以及指定压缩后存储的路径 build/images 来选择需要压缩的图片。同时，我们还指定了压缩选项，包括图片质量参数 quality、最大 max 和最小 min 像素值、最大文件大小 maxFileSize、算法 method、循环次数 loops、是否逐渐压缩 progressive 和子采样率 subsampling。
- 使用 imageminJpegRecompress 插件对图片进行压缩。
-- -------------------- ---- -------
----- -------------------------- -
------------ ---------------
-------- -
------------------------
-- ------
-------- ------
--
-
---imagemin-jpeg-recompress 的深度学习
对于以上代码，有必要进行一些深度学习，以便使用 imagemin-jpeg-recompress 时可以更加顺手地使用它。
- 压缩参数设置
在使用 imagemin-jpeg-recompress 进行图片压缩时，有一系列可选的压缩选项可以进行设置。其中最重要的选项是 quality，这个参数定义了压缩的质量。该参数可设置两个值：“low” 或 “high”，默认为 “high”。
此外，还可以进行以下设置：
max和min：定义了压缩后的最大和最小像素值。maxFileSize：指定你想要压缩的文件最大大小，以字节为单位。method：压缩算法，需要是'mpe','ssim','ms-ssim','smallfry'之一。loops：定义循环次数，用于优化压缩比率。progressive：是否逐渐压缩。subsampling：子采样率，需填写'4:2:2','4:4:4'或'4:1:1'。
在实际使用中，可以灵活设置压缩参数，取决于实际需求和压缩效果。
- 操作示例代码
下面我们以一张图片作为实例，介绍如何使用 imagemin-jpeg-recompress 对其进行压缩。
首先，我们需要准备一张 .jpeg 图片进行压缩。可以将图片放到一个图片文件夹中，用于辨别和管理它们。
接下来，打开你常用的编辑器，新建一个 .js 文件。首先，在文件头部引入 imagemin 和 imagemin-jpeg-recompress 模块，并定义需要处理的文件和路径：
const imagemin = require('imagemin');
const imageminJpegRecompress = require('imagemin-jpeg-recompress');
const SOURCE_PATH = './images';
const DESTINATION_PATH = './build/images';
const FILE_PATTERN = [`${SOURCE_PATH}/*.{jpg,jpeg}`];然后，通过以下代码进行压缩：
-- -------------------- ---- -------
------ -- -- -
----- ----- - ----- ---------------------- -
------------ -----------------
-------- -
------------------------
-------- ------
---- ---
---- --
--
-
---
-
---------------------------- ------ ------------
-----其中，我们通过 await imagemin(FILE_PATTERN, { ... }) 进行压缩，使用 quality: 'low' 表示压缩质量较低，同时指定了最大像素值和最小像素值。最后，控制台会输出压缩完成的数量。
总结
在前端开发中，图片的压缩和减少对带宽的浪费是非常重要的。而 imagemin-jpeg-recompress 是就是一个很好的用于优化 JPEG 图像质量的 npm 包，它使用了更优秀的算法，不仅能保证图片质量，还可以大大减少图片的大小。希望本篇文章能够帮助有需要的开发者了解 imagemin-jpeg-recompress 的使用，并且在实际工作中能够灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63668