设计更快的网页（一）：图像压缩

很多网页开发者都想制作加载速度快的网页。使用响应式设计使网站在小屏幕上看起来更好，这只是移动设备浏览比例不断增加的一个方面。浏览器卡路里可以显示网页加载所需的时间——不仅对用户而言，对搜索引擎而言也是如此，搜索引擎通过加载速度对其进行评级。本系列文章介绍如何使用Fedora提供的工具对网页进行“瘦身”。在开始缩小网页之前，您需要确定核心问题。为此，您可以使用Browserdiet。这是适用于Firefox、Opera、Chrome和其他浏览器的浏览器插件。它对您打开的网页进行性能分析，让您知道从哪里开始缩小网页。然后，您需要使用一些页面。下面的示例是针对getferoda.org的测试的屏幕截图。初看非常简洁，符合响应式设计。BrowserDiet-getfedora.org的评级然而，BroserDiet的页面分析显示该页面需要1.8MB的文件才能加载。所以，我们现在有工作要做！Web优化页面包含281KB的JavaScript文件、203KB的CSS文件和1.2MB的图像。让我们从最严重的问题开始——图像。为了解决这个问题，你需要的工具集是GIMP、ImageMagick和optipng。您可以使用以下命令轻松安装它们：sudodnfinstallgimpimagemagickoptipng例如，我们先获取这个6.4KB的文件：首先，使用file命令获取有关此图像的一些基本信息：$filecinnamon.pngcinnamon.png:PNG图像数据,60x60,8-bit/colorRGBA,non-interlaced此图像仅由白色和灰色组成，使用8-bit/RGBA模式存储。这种方式效率不高。使用GIMP，您可以为该图像设置更合适的颜色模式。在GIMP中打开cinnamon.png。然后，在“图片>模式”菜单中将其设置为“灰度模式”。以PNG格式导出此图像。导出时使用压缩因子9，导出对话框中的其他配置使用默认选项。$filecinnamon.pngcinnamon.png:PNG图像数据,60x60,8-bitgray+alpha,non-interlaced输出显示该文件现在处于8-bit/grayscale+aplha模式。文件大小已从6.4KB缩小到2.8KB。这已经是原始大小的43.75%。然而，我们能做的还有很多！您可以使用ImageMagick工具查看有关此图像的更多信息。$identifycinnamon2.pngcinnamon.pngPNG60x6060x60+0+08-bitGrayscaleGray2831B0.000u0:00.000这告诉你这个文件的大小是2831字节。我们返回GIMP并重新导出文件。在导出对话框中，取消保存时间戳和alpha通道颜色值以使文件大小更小。现在文件输出显示：$identifycinnamon.pngcinnamon.pngPNG60x6060x60+0+08-bitGrayscaleGray2798B0.000u0:00.000接下来，使用optipng无损优化您的PNG图像。有许多具有类似功能的工具，包括advdef（它是advancecomp的一部分）、pngquant和pngcrush。在您的文件上运行optipng。请注意，此操作将覆盖您的原始文件：$optipng-o7cinnamon.png**Processing:cinnamon.png60x60pixels,2x8bits/pixel,grayscale+alphaReducingimageto8bits/pixel,grayscaleInputIDATsize=2720bytesInputfilesize=2812bytesTrying:zc=9zm=8zs=0f=0IDATsize=1922zc=9zm=8zs=1f=0IDATsize=1920Selectingparameters:zc=9zm=8zs=1f=0IDATsize=1920OutputIDATsize=1920bytes(800bytesdecrease)Outputfilesize=2012bytes(800bytes=28.45%decrease)-o7选项处理最慢，但最终效果最好。所以你又将文件缩小了800字节，现在只有2012字节了。要压缩文件夹中的所有PNG，可以使用此命令：$optipng-o7-dir=*.png-dir选项用于指定输出文件夹。如果不加这个选项，optipng会覆盖原来的文件。选择正确的文件格式对于在Internet上使用的图像，您有以下选择：JPG或JPEGGIFPNGaPNGJPG-LSJPG2000或JP2SVGJPG-LS和JPG2000未被广泛使用。只有一些数码相机支持这些格式，所以我们可以忽略它们。aPNG是一种动画PNG格式，也没有被广泛使用。可以通过更改压缩率或使用其他文件格式来保存额外的字节。在GIMP中我们不能应用第一种方法，因为当前图像已经使用了最高的压缩率。由于我们的图像中不再包含aplha通道，因此您可以使用JPG类型而不是PNG。现在，使用默认值：90%质量-您可以将其降低到85%，但这会导致可见的重影。这节省了一些字节：$identifycinnamon.jpgcinnamon.jpgJPEG60x6060x60+0+08-bitsRGB2676B0.000u0:00.000只需将此图像转换为正确的色彩空间并使用JPG作为文件格式，将其缩小23KB到12.3KB，减少了近50%。PNG与JPG：质量和压缩那么我们如何处理文件的其余部分？此方法适用于除Fedora“风味”图标和四个功能图标之外的所有图像。我们可以处理的图像都是白色背景。PNG和JPG之间的一个主要区别是JPG没有alpha通道。因此，它没有透明度选项。如果您使用JPG并为其添加白色背景，则可以将文件从40.7KB缩小到28.3KB。现在您还有四个图像可以使用：背景图像。对于灰色背景，您可以再次使用灰度模式。对于较大的图像，我们可以节省更多空间。它从216.2KB缩小到51KB——基本上是原始图像的25%。总的来说，您已经将这些图像从481.1KB缩小到191.5KB——只有它们开始时的39.8%。质量与大小PNG和JPG之间的另一个区别是质量。PNG是一种无损压缩光栅图形格式。但是JPG虽然采用了压缩的方式来减小尺寸，但是这会影响质量。但是，这并不意味着您不应该使用JPG，只是您需要在文件大小和质量之间找到平衡点。成就第一部分到此结束。以下是使用上述技术后得到的结果：您已将图像大小从1.2MB缩小到488.9KB。只需使用optipng对其进行优化，您就可以获得该大小的三分之一。这可能会使页面加载速度更快。但是，如果从蜗牛比作超音速的话，这个速度还达不到赛车的速度！最后，你可以在GoogleInsights中查看结果，例如：在移动部分，该页面的得分提高了10分，但仍处于“中等”水平。对于台式机，结果看起来非常不同，从62/100到91/100，这也是一个“好”的评级。正如我们之前所说，这次测试并不意味着我们的工作已经完成。通过参考这些分数，您可以朝着正确的方向前进。请记住，您是在优化用户体验，而不是搜索引擎。