许多 Web 开发人员希望实现快速加载网页。 随着越来越多的页面浏览量来自移动设备，使用响应式设计使网站在较小的屏幕上看起来更好只是硬币的一方面。 浏览器卡路里可以改变加载时间，这不仅可以满足用户，还可以满足对加载速度排名的搜索引擎。 本系列文章介绍如何使用工具精简网页 Fedora 优惠。
准备
在开始精简网页之前，您需要确定核心问题。 为此，您可以使用 浏览器饮食. 这是一个浏览器插件可用于 Firefox, Opera 和 Chrome 和其他浏览器。 它分析实际打开网页的性能值，让您知道从哪里开始瘦身。
接下来，您需要处理一些页面。 这 example 屏幕截图显示了一个测试 getfedora.org. 起初它看起来非常简单且响应迅速。
浏览器饮食——getfedora.org 的价值观
但是，BrowserDiet 的页面分析显示下载的文件有 1.8MB。 因此，有一些工作要做！
网页优化
JavaScript 文件超过 281 KB，CSS 文件超过 203 KB，图像中有 1.2 MB。 从最大的问题开始——图像。 为此您需要的工具集是 GIMP、ImageMagick 和 optipng。 您可以使用以下命令轻松安装它们：
sudo dnf install gimp imagemagick optipng
为了 example取 以下文件 这是 6.4 KB：
首先，使用 file 命令获取有关此图像的一些基本信息：
$ file cinnamon.png cinnamon.png: PNG image data, 60 x 60, 8-bit/color RGBA, non-interlaced
仅灰色和白色的图像以 8 位/彩色 RGBA 模式保存。 这并不像它可能的那样有效。
启动 GIMP，以便您可以设置更合适的颜色模式。 在 GIMP 中打开 cinnamon.png。 然后转到图像>模式并将其设置为灰度。 将图像导出为压缩系数为 9 的 PNG。导出对话框中的所有其他设置应为默认设置。
$ file cinnamon.png cinnamon.png: PNG image data, 60 x 60, 8-bit gray+alpha, non-interlaced
输出显示文件现在处于 8 位灰度 + alpha 模式。 文件大小从 6.4 KB 缩小到 2.8 KB。 这已经只有原始大小的 43.75%。 但你可以做的还有更多！
您还可以使用 ImageMagick 工具识别来提供有关图像的更多信息。
$ identify cinnamon2.png cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2831B 0.000u 0:00.000
这告诉你文件是 2831 字节。 跳回 GIMP，然后导出文件。 在导出对话框中禁用时间戳和 Alpha 通道颜色值的存储，以进一步减少这一点。 现在文件输出显示：
$ identify cinnamon.png cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2798B 0.000u 0:00.000
接下来，使用 optipng 无损优化您的 PNG 图像。 还有其他工具可以做类似的事情，包括 高级定义 （这是Advancecomp的一部分）， 量化 和 粉碎。
在您的文件上运行 optipng。 请注意，这将替换您原来的：
$ optipng -o7 cinnamon.png ** Processing: cinnamon.png 60x60 pixels, 2x8 bits/pixel, grayscale+alpha Reducing image to 8 bits/pixel, grayscale Input IDAT size = 2720 bytes Input file size = 2812 bytes Trying: zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 1922 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Selecting parameters: zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920 Output IDAT size = 1920 bytes (800 bytes decrease) Output file size = 2012 bytes (800 bytes = 28.45% decrease)
选项 -o7 处理速度最慢，但提供了最好的最终结果。 您已经将文件大小减少了 800 个字节，现在是 2012 个字节。
要调整目录中所有 PNG 的大小，请使用以下命令：
$ optipng -o7 -dir=<directory> *.png
选项 -dir 允许您为输出提供目标目录。 如果不使用此选项， optipng 将覆盖原始图像。
选择正确的文件格式
当谈到在互联网上使用的图片时，您可以选择：
JPG-LS 和 JPG 2000 没有被广泛使用。 只有少数数码相机支持这些格式，因此可以忽略不计。 aPNG 是一种动画 PNG，也没有被广泛使用。
您可以通过更改压缩率或选择其他文件格式来节省更多字节。 您不能在 GIMP 中执行的第一个选项，因为它已经使用了最高压缩率。 由于没有 阿尔法通道 在图片中，您可以选择 JPG 作为文件格式。 现在使用 90% 质量的默认值 – 您可以将其更改为 85%，但随后别名效果变得可见。 这可以节省更多字节：
$ identify cinnamon.jpg cinnamon.jpg JPEG 60x60 60x60+0+0 8-bit sRGB 2676B 0.000u 0:00.000
仅此转换为正确的色彩空间并选择 JPG 作为文件格式，文件大小就从 23 KB 减少到 12.3 KB，减少了近 50%。
PNG 与 JPG：质量和压缩率
那么剩下的图片呢？ 此方法适用于所有其他图片，除了 Fedora “风味”标志和四个基础的标志。 这些显示在白色背景上。
PNG 和 JPG 之间的主要区别之一是 JPG 没有 alpha 通道。 因此无法处理 透明度. 如果您使用白色背景上的 JPG 重新处理这些图像，您可以将文件大小从 40.7 KB 减少到 28.3 KB。
现在还有四个图像可以重做：背景。 对于灰色背景，再次将模式设置为灰度。 有了这个更大的图景，节省的资金也更大。 它从 216.2 KB 缩小到 51.0 KB——现在只有原始大小的 25%。 总而言之，您已将 481.1 KB 缩小到 191.5 KB — 仅为起始大小的 39.8%。
质量与数量
PNG和JPG之间的另一个区别是质量。 PNG 是一种无损压缩的光栅图形格式。 但是 JPG 通过压缩会丢失大小，从而影响质量。 不过，这并不意味着您不应该使用 JPG。 但是您必须在文件大小和质量之间找到平衡点。
成就
第 1 部分到此结束。遵循上述技术后，结果如下：
您将图像大小从一开始的 1.2MB 降低到 488.9 KB。 仅通过使用 optipng 进行优化，这只有大约三分之一的大小。 这个页面可能会加载得更快。 从蜗牛到超音速的规模，还没有达到赛车速度！
最后你可以检查结果 谷歌洞察， 为了 example：
在“移动”区域，该页面在得分上获得了 10 分，但仍位于“中等”区域。 台式机看起来完全不同，从 62/100 到 91/100 并上升到 Good。 如前所述，此测试不是全部和全部。 考虑诸如此类的分数，以帮助您朝着正确的方向前进。 请记住，您正在为用户 e 进行优化经验， 而不是搜索引擎。
