2

我阅读了有关该主题的几个问题，我看到的一般反馈是JPGs 用于照片，PNGs 用于其他所有内容：

在以下情况下应使用 PNG：

  • 您需要透明度（1 位或 alpha 透明度）
  • 无损压缩效果很好（例如图表或徽标，或计算机生成的图像）

在以下情况下应使用 JPEG：

  • 无损压缩效果不好（比如照片）
  • 需要全彩

GIF 应该在以下情况下：

  • PNG 不可用，例如在非常旧的软件或浏览器上
  • 动画是必要的

但是，这些讨论似乎更适合图像下载。我的问题更适合图像渲染。我打算在 x 和 y 方向重复背景...

background-image: url("/path/to/image.jpg");    /* repeat-x & repeat-y */

...我可以将我的图像存储为JPG~13K 或PNG~50K。因此，尽管有大约 40K 的差异，但浏览器将能够非常快速地提取此图像，因为它相对较小。但是当浏览器在页面上呈现图像时，这种差异是否重要，尤其是因为它是重复的背景？

4

2 回答 2

6

JPG更适合低带宽图像 - 但是它不那么清晰，因此不太适合 GUI。

JPG文件可以保存为更小的文件大小，从而实现更快的交易和在线交付。

JPG可以以不同的压缩级别保存（通常从 1 到 12，12 是更高的质量）。

PNG更适合颜色数量较少的清晰图像，

PNG支持 100% 透明度。无需保存到 PSD（Photoshop 文档）以保持透明度。

PNG支持具有基本效果和格式的图层

您可以继续保存确切的PNG文件，并且不必担心每次都会丢失图像质量。

通常，JPG 用于照片和图片，而 PNG 适用于计算机生成的图形、徽标、网络图标等。

查看有关 JPG 与 PNG 的更多详细信息

于 2012-04-13T05:46:48.253 回答
2

首先，下载图像和在浏览器中渲染它没有区别。为了让浏览器呈现图像，必须完整下载它。

图像重复的事实不是很重要。与下载图像的时间相比，渲染图像所花费的时间是微不足道的。

图像越小越好。您引用的经验法则将有助于进行猜测，但您始终可以尝试两种选择，看看哪个更小，同时又不失质量。

于 2012-04-13T05:01:49.443 回答