点击上方关注，All in AI中国
图像是在网络上提供的最基本的内容类型之一。一张图片有时候胜过千言万语，但如果你不小心，它的大小可能会超过几千兆。
因此，虽然网络图像需要清晰明快，但它们也必须以可管理的尺寸交付，以使加载时间少并且数据使用保持在可接受的水平。
在作者的个人网站上，注意到主页的页面大小已经超过了1.1MB，图像的大小增加了88％。其实就需要度来说，并不一定真的需要那么大，所以，还有优化的空间。
我首先阅读了Addy Osmani的基本图像优化的电子书，并开始在网站上实施他的建议。然后对反映式图像进行了一些研究，并将其应用于此。
这使页面大小降至445kb，减少约62％！
这篇文章的全部内容都主要是为了描述我如何将主页的页面大小提升到更易管理的水平。
什么是图像压缩？
压缩图像就是在保持可接受的视觉质量水平的同时减小文件大小。为了压缩网站上的图像，imagemin是首选工具。
要使用imagemin，请确保已安装Node.js然后打开终端窗口，cd进入项目的文件夹并运行以下命令：
然后创建一个名为imagemin.js的新文件并粘贴以下内容：
您可以随意更改PNGImages、JPEGImages和输出的值，以匹配项目的结构。
要执行任何压缩，您需要根据要压缩的图像类型提取一些插件。
使用MOZJPEG压缩JPEG
为了压缩JPEG图像，我使用了Mozilla的MozJPEG工具，该工具可以通过imagemin-mozjpeg作为imagemin插件使用。您可以通过运行以下命令来安装它：
然后将以下内容添加到imagemin.js文件中：
您可以通过在终端中运行节点imagemin.js来运行该脚本，它将处理所有JPEG图像，并将优化版本放在build / images文件夹中。
作者发现将大小设置为70，可以产生足够好的图像，你可以根据需要尝试使用该值。
默认情况下，MozJPEG会生成渐进式JPEG，这会导致图像从低分辨率逐渐加载到更高分辨率，直到图像完全加载为止。由于它们的编码方式，它们也往往略小于基线JPEG。
您可以使用Sindre Sorhus的这个漂亮的命令行工具来检查JPEG图像是否是渐进的。
Addy Osmani已经充分记录了使用渐进式JPEG的优缺点。对作者来说，优点超过了缺点，所以坚持默认设置。
如果您更喜欢使用基线JPEG，则可以在选项对象中将progressive设置为false。此外，请务必访问imagemin-mozjpeg页面以查看您可以修改的其他可用设置。
使用PNGQUANT优化PNG图像
pngquant是优化PNG图像的首选工具。你可以通过imagemin-pngquant使用它：
然后将以下内容添加到imagemin.js文件中：
结果发现大小为65-80，可以在文件大小和图像质量之间做出很好的折衷。
通过这些设置，能够从913KB到187kb获取网站的屏幕截图，没有任何可辨别的失真，百分比也减少了79％！
这是两个文件，可以自己判断：
- 原始图像（913 KB）
- 优化图像（187 KB）
将WEBP图像发送给支持它们的浏览器
WebP是Google推出的一种相对较新的格式，旨在通过编码无损和有损格式的图像来提供较小的文件大小，使其成为JPEG和PNG的绝佳替代品。
WebP图像的视觉质量通常与JPEG和PNG相当，但通常文件大小要小得多。例如，当我将屏幕截图从上面转换为WebP时，我得到了一个88 KB的文件，其质量与913 KB的原始图像相当，减少90％！
看看这三张图片。你能分辨出来吗？
- 原始PNG图像（913 KB）
- 优化的PNG图像（187 KB）
- WebP图像（88 KB，可在Chrome或Opera中查看）
就个人而言，视觉质量具有可比性，因为所获得的大量节省很难被忽视。
现在我们已经确定了尽可能使用WebP格式的价值，重要的是要注意，此时它不能完全取代JPEG和PNG，因为浏览器中的WebP支持并不普遍。
在撰写本文时，Firefox、Safari和Edge都是不支持WebP的著名浏览器。
然而，根据caniuse.com，全球超过70％的用户使用支持WebP的浏览器。这意味着，通过提供WebP图像，您可以为大约70％的客户提高网页速度。
我们来看看在Web上提供WebP图像的确切步骤。
将JPEG和PNGS转换为WEBP
使用imagemin-webp插件将JPEG和PNG图像转换为WebP非常简单。
通过在终端中运行以下命令来安装它：
然后将以下内容添加到imagemin.js文件中：
我发现将大小设置为85会产生WebP图像，这些图像的质量与PNG相当，但却要小得多。对于JPEG，将质量设置为75可以在视觉质量和文件大小之间取得适当的平衡。
说实话，不要把它们作为推荐。并确保您检查imagemin-webp页面以查看可供您使用的其他选项。
用HTML格式处理WEBP图像
获得WebP图像后，您可以使用以下标记将它们提供给可以使用它们的浏览器，同时为没有WebP支持的浏览器提供等效（优化）JPEG或PNG后备。
使用此标记，了解图像/ webp媒体类型的浏览器将下载WebP变体并显示它，而其他浏览器将下载JPEG变体。
任何不理解的浏览器都将跳过所有源并加载底部img标记的src属性中定义的任何内容。因此，我们通过为所有类浏览器提供支持来逐步增强页面。
请注意，在所有情况下，img标记都是实际呈现给页面的内容，因此它确实是语法的必需部分。如果省略img标记，则不会渲染图像。
标记和其中定义的所有源都在那里，以便浏览器可以选择要使用的图像的变量。选择源图像后，其URL将被提供给img标记，这就是显示的内容。
这意味着您不需要设置它或源标记的样式，因为浏览器不会呈现这些标记。因此，您可以像以前一样继续使用img标签进行样式设置。
总结
正如您所看到的，优化图像在Web上使用的过程并不复杂，可以通过减少页面加载时间为您的客户带来更好的用户体验。所以今天花几分钟时间在您的网站上进行一些图像优化，就会有不一样的结果！
运营：李佳惠
閱讀更多 AI中國 的文章
