这里要注意的关键是每种图像文件格式最适合特定目的。
JPEG 代表“联合图像专家组”。那里应该告诉您 .JPG 文件格式已针对照片进行了优化。它不适用于线条艺术、徽标、渐变或平铺/图案背景等。.JPG 的 DCT(离散余弦变换)伪影(我们都知道和厌恶的“块状”伪影)在线条艺术和徽标中比在照片中更明显。
PNG 已经取代了 GIF,代替了 GIF 曾经擅长的一切,除了一个,这只是因为没有出现明确的标准:动画。动画 .GIF 在网络上广为人知。动画 .PNG 有两个相互竞争的标准:APNG 和 MNG。
大多数现代浏览器都支持 APNG,并且还完全向后兼容(文件扩展名是 .PNG,而不是 .APNG,如果任何可以显示 .PNG 但不知道 APNG 的程序“输入”了 APNG,它将显示开发人员选择的替代图像,或者如果没有提供此类替代图像,则显示动画的第一帧 - 就旧程序而言,它只是一个普通的单帧 .PNG 图像在其中 - 其余部分被安全地忽略)。Gecko(FF等)和 Presto(Opera)原生支持它,而 Google Chrome(使用 Webkit)可以通过附加组件来支持。
MNG 有实际的 PNG 格式开发团队的支持,但它是自己的格式,不向后兼容,但更强大和灵活。目前,只有基于 KHTML 的浏览器 (Konquerer) 支持它:不支持 Trident (IE)、Gecko、Webkit(Chrome、Chromium、Safari),也不支持 Presto。
PNG 可以做 GIF 做的所有事情(除了动画,除非用 APNG 增强),而且做得更好。在其他条件相同的情况下,在相同的分辨率和位深度下,.PNG 几乎总是比 .GIF 小。与 .GIF 一样,.PNG 在索引颜色(调色板)模式下可以支持高达每像素 8 位的颜色深度,但与 .GIF(但像 .JPEG)不同,它还支持每像素 24 位的直接颜色模式。
在任何一种模式下,它都可以添加 8 位 alpha 透明度,这与 .GIF 不同(它只能进行索引颜色透明度 [从调色板中选择一种颜色以替换为 100% 透明度,即不可见性] - .PNG 也可以做到这一点)。Alpha 透明度比索引透明度产生更好的结果,因为像素可以部分透明,而对于索引透明(.GIF 中唯一可用的类型),您可以选择不透明或不可见。当放置在与 .GIF 或索引 .PNG 最初“抠图”的背景颜色不同的背景颜色时,这会在非矩形对象周围产生“光晕”。它还禁止执行诸如发光、阴影之类的效果,当然还有透视彩色对象(没有抖动)。Alpha 透明度几乎可以在任何背景下轻松完成所有这些事情(发光在白色背景上基本上是不可见的,而阴影在黑色上是不可见的,但你知道我的意思)。
是的,您可以在索引颜色的.PNG中进行 8 位alpha透明度!你猜怎么着?即使是 Microsoft Internet Explorer 6 也可以很好地显示这些内容,并且完全透明!只有 32 位 .PNG(24 位 RGB 颜色 + 8 位 alpha)被 IE6 阻塞并显示为灰色!
可以导出具有alpha透明度的PNG8(索引颜色)的最著名的程序是 Adobe(以前称为 Macromedia)Fireworks。Photoshop “Save for Web and Devices”(至少从 CS3 开始)无法做到这一点,尽管在 Adobe 收购 Macromedia 时基本上从 Fireworks 中取消了该功能。它可以保存 PNG8,但只能使用索引颜色透明度。
无论如何,完整的 32 位(甚至 24 位)PNG 将非常大,尽管通常比最接近的等效 .BMP 或 .TGA 或未压缩的 .TIFF 或类似的文件小得多(除非您尝试使用它——这就是 JPEG 的用途!)。它通常比 .RLE(无损压缩的 .BMP)或无损压缩的 .TIF 还要小一些,其他条件相同。
与大多数其他格式不同,PNG 还支持 48 位 RGB 颜色和可选的 16 位 alpha 透明度,以实现极高的质量(远高于大多数显示器的显示质量)。这些最好用作中间存储格式,以保留来自高位深度扫描仪或相机(RAW 模式)等的信息。尽管进行了无损压缩,但它们的文件大小会非常大。
.PNG 目前不能做的一件事是处理非 RGB 颜色空间,例如 CMYK 或 L*a*b。
简而言之:
- 对于照片,请使用 .JPG。
- 对于有限颜色的线条艺术和徽标,请使用索引颜色 .PNG (PNG8),如果需要,使用 alpha 透明度。
- 对于色彩丰富的线条艺术和徽标(例如,大量渐变填充、金属铬型反射效果等),如果您想要最好的质量或需要透明度(并且不介意它在 IE6 中不起作用或使用各种 IE6 变通方法之一来处理透明 PNG),并且不介意更大的文件和带宽使用。否则,请使用 .JPG,但请注意质量会下降。您可能需要将 JPEG 质量提高到相当高的水平,尤其是对于其中包含“文本”的徽标或其他图形,这会减少您节省的文件大小。
- 对于非 Flash/Silverlight/video/HTML5 Canvas 动画,.GIF 是目前的主要选择,但要准备好切换到 APNG(我认为 MNG 不会击败它,尽管 JPEG 提供了更多的官方支持开发商)。