对于过去的网站设计师来说，现代互联网的平均网速速度听起来是多么的不可思议。早在网络发布时，传输的数据量在时间和成本方面都至关重要，因此每个参与网站设计的人都试图缩小图像。
具有讽刺意味的是，这个问题现在还没有消失。每当您访问脚本密集的网站（例如主流世界新闻）时，它通常会提取十几兆字节的JavaScript代码，图像，视频等等。对于一些移动数据用户来说，它可能仍然非常缓慢甚至花费相当多的钱。
在本教程中，我们将了解减少网站设计中的位图文件的方法。只要它使用了旧的PNG和JPEG格式，我们就会看到如何使用一些热门的开源项目，在不影响质量的情况下缩小它们。最后，我们将拥有体积更小的文件，这些文件仍然看起来不错，但需要更少的时间和数据才能在用户的网站浏览器中呈现。
继续阅读以深入了解详细信息。首先，快速说明软件。这里提到的所有工具都是开源的 - 跳到底部以获取如何获得所需软件的指南。
对于文件大小仍然很苛刻可能听起来微不足道，但是有足够的例子，图像太大而没有任何目的，或者看起来很糟糕，尽管它很小。为避免此类错误，请选择一种格式以明智地保存或转换图像。使用JPEG意味着将图像分成8x8像素的图块，其中每个图块都被压缩。压缩级别取决于用户（保存图像时是滑块），但通常JPEG允许10：1文件大小增益，质量可接受。
对于摄影图像而言，以高（80-100）和低（40-60）压缩比制作的JPEG文件之间的感知差异很小，但对于诸如数字艺术作品，图标和屏幕截图之类的东西而言则非常明显。因此，建议为照片选择JPEG，并为其他类型的位图图像选择其他内容。
PNG是最适合网络图形的格式之一（实际上，这就是它的缩写意思）。虽然JPEG格式总是有损的（即使质量设置为100），但PNG格式可能有损或无损。而且，即使是这样，它也通过减少图像中使用的颜色数量来压缩数据，因此结果通常看起来仍然清晰。因此，选择PNG来描绘屏幕抓图或任何其他具有实心填充的图片。
使用一堆免费软件工具可以优化位图文件，因此您不必依赖完整的图像编辑器。想象一下就是这样一个应用程序，它非常容易使用。只需在Imagine窗口上拖动图像（或一叠图像），然后使用小滑块调整压缩比。
Imagine适用于JPEG，PNG和WebP文件，是有损编码的理想选择。最大的优点是该工具具有互动性; 它会立即显示图像在当前设置下的外观，并显示建议的文件大小。Imagine非常适合批量处理 - 如果需要，至少可以一次性保存所有打开的图像。
毋庸置疑，有数十种（如果不是数百种）其他JPEG和PNG优化器，包括一些方便的在线服务（如TinyJPG）。但是不要匆匆离开 - 我们已经有了更好的东西。
对于JPEG，我们在模糊的背景上使用了草帽的测试照片; Guetzli将文件大小减少了33％，Lepton减少了23％。
乍一看，看起来我们不能从有损的JPEG文件大小中获取更多东西，这些东西可以通过使用ZIP或任何其他压缩技术进一步存档图像的徒劳尝试立即证明。但Guetzli是一款智能的瑞士曲奇和精致的JPEG感知编码器。
Guetzli通过增加其压缩密度使平均JPEG小于20％至30％。秘诀是算法意识到人类感知他们所看到的东西的方式，因此产生的图像仍然看起来很棒。Guetzli是一个跨平台的命令行工具，它使用以下语法：
原始图像可以是PNG或JPEG，而输出始终是JPEG。因此，您可以使用Guetzli将PNG转换为JPEG，这要归功于其最先进的压缩效果。质量应该在0-100之间。Guetzli是一个资源丰富的软件; 它每100万像素消耗近300MB内存，并且还有很多CPU功耗。我们希望您的超级优化JPEG不会助长全球变暖......
便携式网络图形是一个不同的故事，只要它是为无损图像编码而设计的。当您在GIMP等图像编辑器中将图像保存为PNG时，您有一个压缩比滑块，其值为0到9.这里0表示没有压缩，它使图像的重量就像保存为TIFF一样。相比之下，9剥离了大部分不需要的颜色信息，并产生比TIFF小15-20倍的文件。
这次我们将尝试将已经很小的PNG文件（比率为9）制作得更小。为此，我们将使用Zopfli，这是另一个源自Google实验室的开源工具。Zopfli是用于Deflate，Gzip和zlib数据编码的高质量压缩器。
有趣的是，Zopfli在一个包中包含两个编码器：通用二进制文件和专用的'zopflipng'工具。后者正是我们所需要的！Zopflipng是一个基于Deflate的编码器，具有从WebP格式向后移植的某些算法。它非常智能，可以使用扫描线代码自动选择最佳策略，并删除PNG中的各种不必要的块。使用这个简单的语法：
您支付的价格与Guetzli相同：该工具需要花费大量时间来处理图像，特别是如果图像很大。您使用的迭代次数越多，所需的时间就越长，但500就是一个合理的数字。Zopfli的文件大小增加在8％到20％之间，这对于视觉上完美的图像非常有用。简而言之，截图通常会增加8％，而照片可能会增加20％（当您需要将它们存储为PNG时）。
形式上，这部分超出了PNG和JPEG的范围，但它非常实用，因为您可以即时组织文件转换。我们在这里的意思是使用超越最佳行业标准的替代和新图像格式（阅读WebP）。
一种是FLIF，一种基于MANIAC（元自适应近零整数算术编码）压缩方法的新型无损图像格式，在压缩比方面可以胜过PNG，FFV1，无损WebP，无损BPG和无损JPEG 2000。FLIF适用于所有平台，一些图像浏览者已经支持它，但它还有很长的路要走。现在，使用FLIF存储或服务器端是有意义的。它可以像一种有效的归档格式。您需要从项目的GitHub页面中获取代码并进行编译。一旦你的flif安装二进制文件，请使用以下命令来编码PNG图像：
将-e替换为-d并以相反的顺序放置文件以将图像“解压缩”回PNG。在工具方面，目前有用于Windows的FLIF WIC API组件，用于Linux的Qt FlIF插件和用于macOS的Phew图像查看器和QuickLook插件（有关详细信息，请参阅链接部分）。与之前Zopflipng折磨的图像相比，FLIF将其文件大小进一步减少了约10％。令人印象深刻
我们的最后一个英雄是Lepton，这是Dropbox开发人员慷慨发布的另一种开源格式。Lepton用JPEG做了FLIF对PNG的作用。在无损模式下，Lepton可以将JPEG减少多达22％，这意味着与原始JPEG文件相比，编码器不会造成任何质量损失。在引擎盖下，Lepton暗示了压缩这些8x8 JPEG块的智能技术。Lepton不是写零和一，而是使用VP8算术编码器对位图数据进行编码，该编码器考虑每个块周围的上下文。
我们的测试证明Lepton非常高效和快速。该命令如下所示：
lepton original.jpg output.lep
在第二个或第二个工具中，该工具生成的.lep文件比原始文件小了近四分之一。与耗时的Guetzli相比，Lepton的速度极快。您可以像Dropbox一样使用Lepton。该格式使您可以将存储成本降低20％至25％，并且由于它非常灵活，您可以进行快速编码/解码序列而没有重大缺陷。顺便说一句，解码命令同样简单，它只需要交换两个文件，结果文件与原始JPEG相同：
lepton original.lep output.jpg
使用所描述的技术优化用户数据存储或进一步提高Web项目的加载速度。