米粽

PNG 优化

原文链接: bjango.com

为什么从不同的设计工具导出相同的图像,文件尺寸会各不相同?可以做些什么优化,来减少下载时间和磁盘空间占用?

我们可以用单个像素的图像来测试。1×1 白色像素的 PNG 图像可以展示各种工具压缩输出的效率,以及是否会包含元数据或额外的数据块。下图是各个工具和常用导出方法的排名。数值的单位是字节,越小越好。

采用默认设置的 Photoshop『另存为』,结果是 18183 字节。去掉 ICC 色彩特性文件后,减少到 14994 字节。它保存了很多非图像数据,这对于照片和其他很多场景是很棒的,对软件产品资产而言却是糟糕的点子。如果用这种方法保存 iStat Menus 用户界面的图像,应用程序在没有任何改进和视觉差异的情况下,大约会增加 17 兆。

Affinity Designer 默认导出的文件也有点大。

去掉 Photoshop『另存为』和 Affinity Designer 的默认设置之后,图表更易读一些。

我们现在看到这些尺寸就比较合理了。最好和最差仅相差 113 字节。看得出来,这么小的差距不足以成为选择设计工具的理由——这些工具都是可以接受的。这种探索主要还是一种好奇心,找出最佳的设置。

ImageOptim 的优化效果显著,但也不尽相同。禁用有损压缩的 ImageOptim 结果表示为红色。

Photoshop

Photoshop 有很多导出 PNG 格式的方法。新增的『导出为』和『快速导出为 PNG』特别好用。 对 1×1 白色像素的 PNG 图像而言,68 字节几乎是最好的结果

Generator 导出的 PNG 格式包含了很多用不上的额外的块。存储修改日期、背景色、物理尺寸有什么目的?据我所知,任何主流平台都没有用到这些东西。考虑到每张图像才 113 字节,这也算不上什么大问题。

如果你使用『另存为 Web 格式』,可能要禁用『嵌入颜色配置文件』,并将『元数据』设置为『无』——这对用户界面图像没有任何用处(也有例外,但很罕见)。

Sketch

如果你希望 Sketch 生成的 PNG 图像能减少 3 个字节,禁用『另存为 Web 格式』。

『另存为 Web 格式』包含一个 γ 块,比禁用了『另存为 Web 格式』的图像的 sRGB 块多 3 字节。

Affinity Designer

调整一些设置后,Affinity Designer 导出的文件尺寸还可以。

Affinity Designer 默认的导出设置包含了大概 3400 字节对用户界面图像无用的内容(iTXt、iCCP、pHYs 和其它块)。

点击导出清单的『更多』,会展开一些重要的附加选项。『像素格式』可以设置为『8 位』,禁用『ICC 色彩特性文件』,并移除元数据。

Illustrator

Illustrator 的 PNG 导出没什么好说的——文件尺寸马马虎虎,也没什么可改进的。

在 PNG 图像中存储『Software』和『Adobe Imageready』字符串没有任何用处。

广色域、高色深

有些用户界面资产确实可能会用到 16 位通道,或需要内嵌 ICC 色彩特性文件,特别是要支持广色域,甚至非 sRGB 资产。

然而在 2016 年,几乎所有的平台和设备都认为没有 ICC 色彩特性文件的图像是 sRGB 的,而且在 Web 或用户界面图像中嵌入 sRGB 或其他配置文件,也十分罕见。

PNG8 很棒

以上这些索引颜色格式的 PNG8 图像都比对应的 PNG24 和 RGBA 格式更大。这是因为在 1×1 像素图像的极端例子中,描述颜色表的信息比图像本身的数据还要大。多数情况下,如果你只需要 256 种或更少的颜色,索引颜色图像都更小。

本文不打算讨论 PNG 格式、SVG 格式、编码绘制图像之间的比较。那是另一个有趣的话题。你只要知道,很多网站、iOS 应用程序、Android 应用程序、macOS 应用程序都广泛使用了 PNG 格式图像,因此图像优化是有益的。

以上分析使用了 InspectPNG。PNG 文件分别由 Photoshop CC 2015.5.0、Illustrator CC 2015.3、Sketch 39.1 (31720)、Affinity Designer 1.4.2 生成。之后版本导出的 PNG 可能会更好。