网站图片格式:选择正确的格式完成正确的任务

50 浏览
0 Comments

网站图片格式:选择正确的格式完成正确的任务

在设计网站时,你认为针对特定任务使用哪种图像格式最好?

我总是在尝试确定特定任务要使用哪种格式时陷入了进退两难的境地……例如,我应该全部使用 .jpg 吗?或者,什么情况下,为什么要使用 .png?

例如,以 Amazon 网站为例,他们使用 .jpg 作为产品图片(例如: Example),使用 .gif 作为透明像素(例如: Example)并使用 .png 作为他们的 CSS Sprites (例如: Example)。

另一方面,Play.com 使用 .gif 作为他们的网站标志(例如: Example),但像 Amazon 一样,使用 .jpg 作为他们的网站产品(例如: Example),至于他们的主页,上面没有使用 .png。

那么我应该为我的网站使用什么格式?我应该使用它们的原因是什么?

【更新】

感谢 CruellO 提供解释区别的链接 以及 Dustin 给出的使用原因。

admin 更改状态以发布 2023年5月24日
0
0 Comments

JPEGs适用于照片。有时候我会看到有文本的JPEG图像,它们看起来非常糟糕。文本最好使用文本格式,否则使用PNG。

如果它不是照片,但你想要一个图形,使用PNG。PNG几乎总是比等效的gif文件要小,并且不会像JPEG文件那样失去质量。一个JPEG文件的等效PNG文件通常会更大(假设它是逼真的照片)。在某些情况下,这仍然是可取的。

PNG确实允许8位透明度,但如果你必须支持IE,你会发现它们一直无法正确地支持。它们支持8位图像中的一个位的透明度(实质上与gif相同)。此外,还有许多技巧可以让8位透明度在IE中正常工作。我自己从来没有这么麻烦过。

总之:

  • 照片 → jpg
  • ! 照片 → png
0
0 Comments

你应该了解一些关键因素...

首先,有两种压缩方式:无损压缩有损压缩

无损压缩意味着图像被缩小,但不会损失质量。 有损压缩意味着图像被缩小,但会损失质量。如果你反复以有损压缩格式保存图像,图像质量会逐步变差。

还有不同的颜色深度(调色板):索引颜色直接颜色

使用索引意味着图像只能存储作者选择的有限数量的颜色(通常为256),直接意味着你可以存储许多未被作者选择的颜色。


BMP - 无损压缩/索引和直接

这是一个旧格式。它是无损压缩的(保存时没有图像数据丢失),但几乎没有压缩,这意味着保存为BMP会产生非常大的文件大小。它可以具有索引和直接的调色板,但这只是一点儿小安慰。文件大小是如此之大,以至于没有人真正使用这种格式。

优点:实际上没有任何BMP擅长的事情,或者是其他格式做得更好。

BMP vs GIF


GIF - 无损压缩/只支持索引

GIF使用无损压缩,这意味着您可以反复保存图像而不会丢失任何数据。文件大小比BMP要小得多,因为实际使用了良好的压缩,但它只能存储索引调色板。这意味着文件中的颜色最多只能有256种。听起来相当少,也确实是。

GIF图像还可以动画和透明。

优点:用于徽标、线描和其他需要小尺寸的简单图像。只用于网站。

GIF vs JPEG


JPEG - 有损压缩/直接

JPEG图像的设计初衷是通过删除人眼无法察觉的信息,使详细的摄影图像尽可能的小。因此,它是有损压缩,反复保存同一个文件会导致随着时间流逝丢失更多的数据。它具有数千种颜色的调色板,因此非常适合用于摄影,但有损压缩意味着它不适合用于徽标和线描:它们不仅会显得模糊,而且这些图像的文件大小也会比GIF大!

适合用于:照片. 同时也适合渐变色。

JPEG vs GIF


PNG-8 - 无损压缩 / 索引颜色

PNG 是一种较新的格式,而 PNG-8(PNG 的索引版本)实际上是 GIF 的一个良好替代品。不过很不幸,它也有一些缺陷:首先,它无法像 GIF 一样支持动画(尽管它可以,但只有 Firefox 支持,而每个浏览器都支持 GIF 动画)。其次,在旧版浏览器(如 IE6)中可能出现一些支持问题。第三,重要的软件(如 Photoshop)的格式实现非常差。(该死的 Adobe!)PNG-8 只能存储与 GIF 相同的 256 种颜色。

适合用于:PNG-8 的主要优点在于支持 Alpha 透明度。

PNG-8 vs GIF

重要说明:Photoshop 不支持 PNG-8 文件的 Alpha 透明度。(该死的 Photoshop!)不过有一些方法可以将 Photoshop PNG-24 转换为 PNG-8 文件并保持其透明度。其中一个方法是使用 PNGQuant,另一个方法是使用 Fireworks 来保存文件。


PNG-24 - 无损压缩 / 直接颜色

PNG-24 是一种很好的格式,将无损编码与直接颜色(类似于 JPEG 的数千种颜色)相结合。它很像 BMP,但 PNG 实际上对图像进行了压缩,所以结果会产生比较小的文件。不过,PNG-24 文件仍将比 JPEG、GIF 和 PNG-8 大得多,因此您仍需要考虑是否确实要使用它。

尽管 PNG-24 允许使用数千种颜色并具有压缩功能,但它们并不打算取代 JPEG 图像。作为 PNG-24 保存的照片可能比相应的 JPEG 图像大至少 5 倍,并且可见的质量改善极少。(当然,如果您不关心文件大小,想要获得最佳质量的图像,这可能是一个理想的结果。)

与 PNG-8 一样,PNG-24 也支持 Alpha 透明度。

0