JPEG 与 PNG 的初学者指南（以及如何使用两者）

已发表: 2021-11-02

带有图像的网络会是什么？ 几十年内，互联网已经从数字点阵打印机变成了多媒体的动态服务器，包括图像、视频、动画等。 但是，当涉及到数字静止图像时，JPEG 与 PNG 可能会产生混淆，特别是何时使用它们。

如果您将 JPEG 图像与相同但作为 PNG 一起查看，您可能会发现没有区别。 这是最理想的，因为这两种图像格式都旨在为网络重现最佳图像。 但是，您需要注意不同的用例和优化技术。

在本文中，我们将比较 JPEG 与 PNG，并告诉您何时应该使用每种图像格式。 首先，让我们向您介绍每种文件类型。

JPEG与PNG之间的区别

从表面上看（从字面上看），JPEG 和 PNG 没有区别。 换句话说，如果我们放两张图片，让你选择哪一张是JPEG，哪一张是PNG，你大部分时间都分不清。 例如，采取以下图像：

一只蝴蝶。

您能否确定这只猩红色摩门教蝴蝶是 JPEG 还是 PNG 图像？ 当然，没有参照系就无法进行比较：

同一只蝴蝶的另一个图像。

有明确的差异，尽管在这种情况下不会有很大的不同。 在您尝试做出决定时（无需查看浏览器的开发人员工具），我们可以分享一些技术细节：

  • 联合图像专家组 (JPEG) 文件格式提供数字图像的有损压缩。 这意味着如果图像质量与文件大小之间的平衡过大，图像质量就会很明显。 JPEG 是“平面”文件。 换句话说，它们不能在文件中显示透明度。 虽然您可以调整压缩级别，但即使在最佳设置下，JPEG 也将是 8 位文件，这会影响动态范围。 更重要的是，JPEG 通常包含一个颜色配置文件，它告诉监视器如何显示其中的颜色。
  • 相比之下，便携式网络图形 (PNG) 图像是可用于 Web 的文件。 它是一种比 JPEG 更动态的格式，能够输出 24 位文件。 它也是一种“无损”格式，这意味着您可以复制它而不会降低图像质量。 但是，您无法调整 PNG 文件的压缩率，也没有颜色配置文件。 尽管如此，根据其技术规范，PNG 非常适合 Web。

看起来很明确——PNG 适合网络，而 JPEG 不适合。 好吧，这还不是全部。 每种文件类型都适用于某些应用程序。 接下来，我们将讨论它们。

JPEG vs PNG：何时应该使用每一个

网络可以充分利用 JPEG 和 PNG。 事实上，它们以一种很好的方式相吻合，没有太多的交叉。 作为一个方便的声音片段，这里是你应该使用 JPEG 与 PNG 的时候：

如果要显示照片，请使用 JPEG。 对于任何其他文件——尤其是数字图形——使用 PNG。

不过，此建议并非适用于所有情况（尽管它几乎适用于所有情况）。 例如，如果您将数字绘图与库存图像相结合，那么 JPEG 和 PNG 在技术上都无法正确使用。 稍后，您将有更多的知识来做出正确的决定，尽管还有其他一些建议可以给您。

例如，如果您想复制图像，请使用与 JPEG 不同的文件格式。 这是因为有损压缩格式仅重建文件的近似版本。 相比之下，PNG 是 1:1 复制，因为它提供无损压缩。

此外，如果您想在保存图像后调整图像大小，请使用 JPEG，因为它可以很好地处理缩放。 PNG 使用不同的编码结构，一旦您更改尺寸（或其他技术属性），它就会降级。

您应该了解的其他图像格式

当然，JPEG 与 PNG 并不是唯一需要考虑的图像文件格式比较。 还有许多其他文件类型在争夺注意力，并有其他用例：

  • 图形界面格式 (GIF)。 如果你在 Twitter 上发布一个动画的模因或反应视频，它就是一个 GIF。 事实上，PNG 希望在其原始规范中替换 GIF 文件，并且它们都提供透明层。
  • 标记图像文件格式 (TIFF)。 这种基于光栅的文件格式非常适合打印，因为它支持 CMYK 颜色空间。
  • 原始图像格式 (RAW)。 如果您是摄影师，您只会使用它，并且它是您使用的相机独有的。 虽然您可以在计算机上查看 RAW 文件，但您需要专用软件才能查看它。 文件大小是天文数字，因为数据是完整的。 事实上，RAW 格式不是图像，而是编码时代表图像的数据。
  • 高效图像文件 (HEIF)。 这是 iOS 设备的主要文件格式。 它提供比 JPEG 更好的压缩和文件大小，并且可以处理许多不同的多媒体格式。

虽然这些图像文件中的每一个都将在网络上看到使用（除了关于显示的 RAW 文件），但 JPEG 与 PNG 仍然占主导地位。 它们都有特定的用例，可以很好地平衡利弊。

如何准备要上传的图像（以 3 种方式）

尽管 JPEG 与 PNG 在最终显示质量方面出现了平局，但您必须以不同的方式处理每种格式以充分利用它。 您可以在三个方面影响图像的文件大小、质量和整体准备：

  • 确保维度考虑到您将遇到的相关用例。
  • 为您的图像选择适合网络的分辨率。
  • 使用“雅致”压缩来进一步减小图像的文件大小，而不会过多影响质量。

如您所料，这里有一个很好的平衡。 让我们从图像的尺寸开始。

1.设置你的尺寸

对于最终用户来说，图像的尺寸比链中的任何其他点都更重要。 这是因为浏览器要加载图片，大文件会侵蚀用户体验（UX）。 不过，这不是唯一的考虑因素。 当然，质量也是关键。 如果您决定使图像尺寸变小，它将影响最终的图像质量（JPEG 比 PNG 更是如此）。

答案是从您的图像尺寸开始，在几个领域达到最佳效果。 一般来说，你想让你的图片足够大，这样它们就可以传达你需要的细节。 根据目标平台和图像本身的不同，有些地方会有些过度杀伤力。

在 Apple Preview 中设置图像尺寸。

现代作物传感器和全画幅数码相机可以生成默认尺寸约为 6,000 像素 x 3,000 像素的图像（尽管相机之间存在巨大差异）。 相比之下，“长边”大约为 2,000 像素的图像在社交媒体上很常见。 请记住，这是为了在设备的完整视口中显示。

对于博客图像，这个 2,000 像素的经验法则甚至可以低至 1,000 像素。 这也考虑了高清或“视网膜”图像。 它们通常需要双倍尺寸才能在高清屏幕上显示清晰。 事实上，决议是下一步的好去处。

2.设置正确的分辨率

数字屏幕的基本元素之一是像素。 这些小点构成了整个显示屏，尽管像素大小不一。 因此，在准备 JPEG 和 PNG 图像时，我们还必须考虑分辨率。

我们使用每英寸像素 (PPI) 来讨论屏幕上可以容纳多少像素。 您也可以用厘米或“点”来表示。 后者用于物理打印格式，平面设计界经常使用 DPI。 因此，您会听到它以可互换的方式使用，尽管 PPI 是正确的术语。

虽然 PNG 图像规范使用 72 PPI 作为其最佳设计分辨率，但这并没有考虑现代高清屏幕。 虽然您可以将图像的尺寸加倍以在所有屏幕上呈现清晰的图像，但您也可以对分辨率执行相同操作。 例如，以 macOS Big Sur 桌面的截图为例：

使用高分辨率的屏幕截图。

这是一个 PNG，长边（在本例中为顶部和底部）有 1,000 像素。 虽然，它使用 144 PPI——尽管有一些上传“魔法”可以在上传到 WordPress 时将分辨率转换为 72 PPI。

PNG 和 JPEG 图像都可以使用更高的 PPI——可打印的分辨率约为 300 DPI/PPI。 更重要的是，来自诸如Pixabay等库存照片网站的大量图片将使用300 PPI下载：

一只白鹭鸟。

因此，减少这种情况将更好地为网络及其各种显示准备您的图像。

3. 使用压缩优化您的图像

我们不必告诉您太多有关图像优化的信息。 这是您可以在博客的其他地方找到的主题，几乎所有 WordPress 用户都知道在上传过程之前或期间优化图像。

一般概念是您通常以有损方式对图像应用额外的压缩。 这确实会影响图像质量，如果您在应用大量有损压缩之前对尺寸和分辨率进行全面更改，则会很明显。

过度压缩、优化不佳的图像。
您可以看到以“色带”的形式出现的图像质量明显下降——这是压缩不良的明显伪影。

为了很好地呈现图像，这些伪影必须是最小的。 因此，有很多工具可以完成这项工作。 最容易访问的是 TinyPNG，尽管它也压缩 JPEG：

TinyPNG 主页。

不过，它应用的压缩对某些图像来说是温和的，这可能不会使文件大小足够小。 像 ShortPixel 这样的服务提供了一种激进的有损压缩格式，而与 TinyPNG 相比，它的 Glossy 压缩做得令人钦佩。

短像素工具。

这里的要点是，您必须平衡压缩级别与文件大小以及图像的所有其他元素。 在下一节中，我们将讨论采取的最佳方法。

JPEG vs PNG：如何充分利用每种格式

尽管文件格式存在差异，但浏览网页的性质意味着您可以将图像准备归结为以下内容：

  • 在长边上使用 1,000–2,048 像素之间的尺寸。
  • 为所有图像设置 144 PPI 的分辨率，以确保它们在所有屏幕上显示清晰。
  • 通过图像优化应用细微压缩以帮助减小文件大小。 考虑到所有因素，大多数图像的大小约为 100-200kb。

这里还有一些基于特定文件格式的内容：

  • 对于 PNG 文件，减小尺寸可能会严重降低图像质量。 这里的想法是保持尽可能高的分辨率以减轻这些因素。
  • JPEG 文件经不起复制，因为每次复制都比上一次更加退化。 如果您可以控制 JPEG 的来源（例如，如果您拍摄了照片），请从 TIFF 或 RAW 文件创建 JPEG 以保持图像的质量。
  • 根据我们的经验，JPEG 不像其他文件格式那样进行压缩。 这意味着在压缩阶段之前准备和优化这些图像很重要。

到目前为止，您应该对 JPEG 与 PNG、何时使用它们以及如何准备文件有了扎实的了解； 如果你还想知道文章开头哪张图片是JPEG，那就是第一张！

包起来

似乎图像在网络上运行。 因此，我们有多种文件格式来帮助我们以合适的文件大小为应用程序提供正确的质量。 JPEG 与 PNG 是一个常见的比较，因为尚不清楚两者都擅长什么，它们是两种流行的图像格式。

简而言之，JPEG 用于照片，PNG 用于图形。 要准备文件，主要关注点应该是保持高图像质量而不是文件大小。 尽管如此，虽然对分辨率的调整会给您带来最大的变化，但这对图像质量的影响更大。 诀窍是平衡尺寸、分辨率和压缩，以实现最终的网络就绪图像。

您是否按照我们在此处概述的那样为网络准备图像，或者您是否做一些不同的事情？ 在下面的评论部分让我们知道！

图片来源：minka2507，克里斯特尔。