css - 我应该使用 JPG 还是 PNG 作为平铺背景(背景重复)？

Question

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

PNG should be used when:

• You need transparency (either 1-bit or alpha transparency)
• Lossless compression will work well (such as for a chart or logo, or computer generated image)

JPEG should be used when:

• Lossless compression will not work well (such as a photograph)
• Full color is needed

GIF should be when:

• PNG is not available, such as on very old software or browsers
• Animation is necessary

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

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

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

Answer 1

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

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

JPG 可以保存为不同的压缩级别(通常为 1 - 12，12 是更高的质量)。

PNG 更适合色彩较少的清晰图像，

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

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

您可以继续保存完全相同的 PNG 文件，而不必担心每次都会降低图像质量。

一般来说，JPG 用于照片和图片，而 PNG 适用于计算机生成的图形、 Logo 、网络图标等。

See the more details about JPG vs PNG