图片是 Web 提供的最基本的一种内容类型，人们都说一张图片胜过千言万语。但如果你一不小心，它也可能占用你好几兆带宽。
虽说 Web 图像应该尽可能清晰明快，但文件大小必须是可管理的，以便保持较快的加载速度，并且应该将数据使用保持在可接受的水平。
在我的网站上，我发现主页的大小超过了 1.1MB，其中图像占了 88％。我也意识到我提供的图片比实际需要的要大（比如分辨率）。显然，还有很大的优化空间。
我开始阅读由 Addy Osmani 撰写的“Essential Image Optimization”电子书（https://images.guide/），并开始在我的网站上尝试他的建议。然后我又研究了一些响应式图像方面的知识，并也将其应用在我的网站上。
这样就可以将页面大小降至 445KB，减少了约 62％！
本文将介绍我如何优化主页大小，将其提升到更可管理的水平。
什么是图像压缩？
压缩图像是指在保持可接受的视觉质量水平的同时减小图像文件的大小。我使用 imagemin（https://github.com/imagemin/imagemin）来压缩我网站上的图像。
要使用 imagemin，请确保已安装了 Node.js，然后打开终端窗口，cd 到项目的文件夹，并运行以下命令：
npm install imagemin
然后创建一个名为 imagemin.js 的新文件，并粘贴以下内容：
const imagemin = require('imagemin');
const PNGimages = 'assets/images/*.PNG';
const JPEGImages = 'assets/images/*.jpg';
const output = 'build/images';
你可以根据具体的项目结构随意修改 PNGImages、JPEGImages 和 output 的值。
要进行图像压缩，你需要根据要压缩的图像类型安装一些插件。
使用 MozJPEG 压缩 JPEG
为了压缩 JPEG 图像，我使用了 Mozilla 的 MozJPEG（https://github.com/mozilla/mozjpeg），它可以通过 imagemin-mozjpeg（https://www.npmjs.com/package/imagemin-mozjpeg）作为 imagemin 的插件使用。你可以通过运行以下命令来安装它：
npm install imagemin-mozjpeg
然后将以下内容添加到 imagemin.js 文件中：
const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>
imagemin([JPEGImages], output, {
plugins: [
imageminMozjpeg({
quality: 70,
}),
]
});
optimiseJPEGImages()
.catch(error => console.log(error));
你可以在终端中输入 node imagemin.js 来运行这个脚本。这样就会处理所有的 JPEG 图像，并将优化过的图像放在 build/images 文件夹中。
我发现将质量设置为 70 可以得到足够好的图像，但是你的要求可能会不一样，所以请根据你的需要设置具体的值。
MozJPEG 默认会生成渐进式 JPEG，在加载图像时，从低分辨率逐渐加载到高分辨率，直到图像加载完毕。由于它们的编码方式不一样，所以往往会比基线 JPEG 小一些。
你可以使用这个命令行工具（https://www.npmjs.com/package/is-progressive-cli）来检查 JPEG 图像是否是渐进式的。
Addy Osmani 已经详细介绍过使用渐进式 JPEG 的优点：
https://images.guide/#the-advantages-of-progressive-jpegs
缺点：
https://images.guide/#the-disadvantages-of-progressive-jpegs
在我看来，它是利大于弊的，所以我使用了默认设置。
如果你更喜欢使用基线 JPEG，可以在选项对象中将 progressive 设置为 false。此外，更多的选项设置请参考 imagemin-mozjpeg 页面：
https://www.npmjs.com/package/imagemin-mozjpeg
使用 pngquant 优化 PNG 图像
pngquant 是我用来优化 PNG 图像的首选工具，你可以通过 imagemin-pngquant（https://www.npmjs.com/package/imagemin-pngquant）插件来使用它：
npm install imagemin-pngquant
然后将以下内容添加到 imagemin.js 文件中：
const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>
imagemin([PNGImages], output, {
plugins: [
imageminPngquant({ quality: '65-80' })
],
});
optimiseJPEGImages()
.then(() => optimisePNGImages())
.catch(error => console.log(error));
我发现将 quality 设置为 65 到 80 可以在文件大小和图像质量之间获得良好的折衷。
使用这些设置，我可以将网站截图从 913 KB 减到到 187 KB，而不会出现任何明显的视觉方面的质量损失。文件大小整整减少了 79％！
下面是这两个文件，可以下载下来自己去判断：
原始图像（913 KB）：
