为移动应用程序导出图形 PNG 还是 JPEG？

Question

在本移动设计教程中，Jen Gordon 解决了是否以 PNG 或 JPEG 图像格式导出用于移动应用程序的图像文件的问题。

我最近收到了来自 Mobiletuts+ 读者 Ronald 的一个很好的问题，他正在构建一个需要加载葡萄照片（是的，葡萄）的应用程序。嘿，我不问问题，我只是回答他们。具体来说，他的问题是：

我是否将我的葡萄照片保存为 .png 或 .jpg 格式？

好问题！毕竟，.png 是 iOS 平台推荐的图像文件格式是有据可查的，但是对于基于 Web 的项目，众所周知，.jpg 格式更适合用于摄影图像。

JPG、GIF 和 PNG - 有什么区别？

首先，让我们了解一下每种文件格式的细微差别。对于真正书呆子的细节，去这里。

• JPEG - 摄影图像的标准，不支持透明度。
• GIF - 限制为 256 色，因此适用于大块纯色和简单图形。它支持透明度，但会产生锯齿状边缘。
• PNG - .jpg 和 .gif 的可爱组合，允许 .jpg 质量的图像和透明度，而没有 .gif 锯齿。

选择哪个以及为什么

原生 iOS 应用程序的简单答案是始终使用 PNG，除非您有非常非常好的理由不使用。

构建 iOS 应用程序时，Xcode 会以不优化其他文件格式的方式优化 .png 文件。它变得非常深入，您可以在此处阅读详细信息。Jeff Larmarche 博客中的这句话解释得最好：

当您使用任何其他文件类型时（或者如果您加载未优化的 PNG 文件），您的 iPhone 必须在加载时进行字节交换和 alpha 预乘（并且可能在显示时重新进行 alpha 乘法）。您的应用程序基本上必须执行与 Xcode 相同的处理，但它是在运行时而不是在构建时进行的。这将在处理器周期和内存开销方面给您带来成本。

从 Web 加载的图像呢？

并非您在 iOS 应用程序中看到的所有图像实际上都是应用程序二进制文件的一部分。这意味着它们是从网络下载并从实际应用程序 外部 提供给应用程序的。在这种情况下，将图像优化为尽可能小的文件大小是有意义的，这通常意味着使用 PNG 以外的格式。

下面是我正在谈论的一个例子。你可以看到我为 iPhone 屏幕设置了葡萄图像，320x480px，72dpi：

当 保存为 Web 对话框出现时（文件菜单 > 保存为 Web），您可以并排看到将图像保存为 .png 与 .jpg 之间的区别。

• 文件大小- 这是最显着的差异。.png 为 258k，而 .jpg 为 18k。这是一个巨大的差异。如果您的应用程序正在从网络加载这些图像，您的用户将不会欣赏 .png 的额外等待时间。
• 颜色和对比度- .jpg 中的颜色更丰富、更饱和。.png 看起来已经褪色了。

因此，关于何时使用 .jpg 与 .png 进行网络下载的一些实用技巧：

使用 JPG

• 如果您不需要保留图像的透明背景
• 如果您正在处理需要保留图像质量、颜色和饱和度的照片。

使用 PNG

• 当您的图像需要透明度时
• 处理纯图形图像时。照片无法以 .png 格式呈现

GIF 和 TIF 怎么样？

好吧，我们不能把他们排除在谈话之外，对吗？

TIF

.tif（或 .tiff）文件不会在 Save for Web 环境中呈现。通常 .tif 文件是高质量的图像，您可以在其中保留透明度和图层。你会看到它们在印刷设计中使用了很多。

动图

.gif 文件一直在网页设计中使用，并且可以像 .png 一样保持透明度。使用 .gif 的问题是双重的：

1. 如果您要导出照片（如下所示），从文件大小或图像质量的角度来看，.gif 确实无法与 .jpg 竞争：

2. 如果您正在导出图形并考虑使用 .gif，请再想一想。.gif 保持透明度的方式与 .png 不同。看看下面的例子，我想保留按钮周围的发光。我切出按钮，隐藏方格背景，然后转到 文件 > 为 Web 保存 以打开 为 Web 保存 对话框：

在保存为 Web 对话框中，您可以看到当我选择 gif 时按钮的呈现方式。该按钮被我在 哑光 下拉菜单中选择的颜色包围。.gif 格式要求任何透明渐变都具有渐变可以过渡到的背景（或哑光）颜色。想象一下这个按钮在我的方格背景上分层的样子。

这就是为什么 .png 如此美妙的原因。看看透明度实际上是如何透明的？在选中的背景上分层，它将看起来与模型中的完全一样！

结论

总而言之，对于使用应用程序二进制文件提供图像并使用 Xcode 构建的本机 iOS 应用程序，请使用 .png 格式。唯一的例外是当您处理从 Web 加载到应用程序中的图像时。然后优化到最大！