JPG vs PNG：为您的网站选择哪个？

在为您的网站选择照片时，重要的不仅仅是照片中的内容。 事实上，选择正确的图像格式同样重要。 那么让我们来谈谈 JPG 与 PNG，选择哪个以及为什么。

如果你选择了错误的格式，你最终可能会得到一个更慢的网站、更高的跳出率和更低的转化率——这不是你想要的，尤其是当它可以很容易地避免时。

PNG和JPG之间的区别

让我们从基本定义开始。

PNG 代表便携式网络图形，具有所谓的“无损”压缩。 这意味着压缩前后的图像质量是相同的。

JPEG 或 JPG 代表联合图像专家组，具有所谓的“有损”压缩。

正如您可能已经猜到的那样，这是两者之间最大的区别。 JPEG 文件的质量明显低于 PNG 文件。

但是，较低的质量不一定是坏事。

什么是JPEG？

JPEG 图像是数码摄影产生的图像的常见选择，它们是具有复杂颜色和阴影的图片的不错选择。

虽然 JPG 的 10:1 压缩在质量上的损失很小，但较小的尺寸使 JPEG 适合 Web 使用，因为减少用于照片的数据量有助于响应式演示。

另一方面，由于相邻像素之间的鲜明对比，JPG 图片不是线条图和其他文本或标志性图形的最佳选择。 如果您想为您的网站使用该类型的图像，您可能应该考虑使用无损图形格式。

什么是 PNG？

PNG 是作为 GIF 的改进替代品而创建的，它已成为 Internet 上最常见的无损图像压缩格式。

那么什么是PNG文件呢？

PNG 图像被称为便携式网络图形，可以是基于调色板、灰度和全彩色非基于调色板的 RGB/RGBA。

PNG 文件格式专为在 Internet 上传输图像而不是打印图形而设计，因此不支持非 RGB 颜色空间，例如 CMYK。

最大的优点是 .png 提供了多种透明度级别，这意味着 PNG 背景可以是完全透明的，这对于 png 标志设计和类似的设计很重要。 它也是具有淡入淡出效果的图片的最佳选择。

JPG vs PNG – 基本规则

由于 JPG 和 PNG 格式各有利弊，您应该充分利用它们并发挥它们的优势。

实际上，这意味着您应该将 .jpeg 用于照片，将 .png 用于图形和屏幕截图。

真的有关系吗？

在谈论 JPG 与 PNG 并并排比较两者时，事实是您将无法在照片中看到太大的差异。

因此，如果 PNG 图片看起来没有 JPG 好得多，为什么不总是使用 JPG 格式并让自己更轻松呢？

不幸的是，这并不是那么简单，其原因是图像压缩。

您想要最高质量的图像格式，但您还想要一个响应式网站，因此您需要真正考虑 jpeg 和 png 之间的差异，特别是图像压缩方面的差异。

可以这样想：图像压缩意味着在不为尺寸而牺牲质量的情况下减小图像尺寸。 通常，更强的压缩等于更小的文件大小，这等于更差的图像质量。

因此，如果您想要一个好的压缩，您需要在文件的质量和大小之间找到适当的平衡点。

当您查看保存在计算机中的图像时，您会看到它的最佳版本，因为该文件尚未压缩。 但是，如果网站上有相同的图像，则需要下载它才能看到它。

从逻辑上讲，这意味着图像越大 - 加载时间越长。

图像压缩服务

有许多用于图像压缩的服务和工具，这里有一些可以用于 jpg 或 png 的好工具：

• Kraken.io – 大小和质量之间的完美平衡

• Kraken WordPress 插件 – 自动压缩您上传到您网站的图像

• WP Smush – 一个 WordPress 插件，可以自动压缩您的图像

包含文字的图片

有时，您会想要使用包含文本的图片，在这里选择 jpeg 或 png 真的很重要。 对于这种类型的图片以及具有精细细节的图形，PNG 通常是更好的选择。

jpg 和 png 之间的一个重要区别是，对于 JPG，字母的轮廓以及图形中的细线通常显得不那么清晰。

常规图片

虽然 .png 文件中的图形和带有字母的图像通常更好看，但对于普通照片，JPG 是网络的更好选择，因为如果尺寸更小。

如果您决定只使用 PNG，它们会降低您的网站速度，从而导致用户感到沮丧。

调整图像大小

除了压缩之外，您还可以考虑调整要用于网页设计的图像的大小。 好消息是调整大小并不是一个复杂的过程，有两种方法可以做到：

1 – 使用一些调整大小的工具，您可以手动移动图像的边缘。 如果您想保持原始的高宽比，请确保抓住图像的一角而不是一侧，这样您就可以按比例调整图像大小。

2 – 如果您不想通过手动调整来调整图像大小，或者如果您需要特定大小的图像，您可以使用一些高级图形程序，这些程序允许您指定图像大小然后调整时间相应的图像。

但是，有时图像在调整大小后会有点失焦，因此请考虑在将其导出为 png 或 jpg 之前使用一些锐化工具。

当您不确定时，PNG 与 JPG

到目前为止，我们知道 JPG 更适合照片，而 .png 图像更适合带有文字的图表和图片。 但是对于介于两者之间的图像，什么更好呢？

屏幕截图就是一个很好的例子，因为它们通常包含照片以及文本和清晰的线条。

然而，当谈到截图时，如果谈到 JPG 与 PNG，几乎总是使用 PNG 格式更好地保留图片中文字的清晰度和可读性。

归根结底，如果您仍然不确定应该使用哪种格式，您可以随时将图片保存在这两种格式中，然后比较它们并确定您认为最适合您需求的一种。

结束关于 JPG 与 PNG 比较的想法

既然您知道 PNG 文件是什么以及 PNG 和 JPG 之间的区别是什么，那么您应该更容易选择正确的格式来保持您的网站既美观又快速且响应迅速。

在谈论 JPG 与 PNG 时，需要牢记一些关键事项。

PNG 是图表、带有文本的图片、屏幕截图以及需要使用透明度的设计（例如徽标设计等）的最佳选择。 但是，最大的缺点是它们的大小更大，并且会降低您的网站速度。

另一方面，JPG 更小，加载速度更快，但压缩会带来一些质量损失，这对于照片通常不是问题，但对于包含细线的文本或图像可能会很糟糕。

那么你应该使用哪一个呢？ 好吧，这取决于图像的类型和您正在构建的网站的类型。