在构建网站或界面等时应何时使用某些图像文件类型？
他们的强项和弱点是什么？
我知道 PNG 和 GIF 是无损的，而 JPEG 是有损的。
但是 PNG 和 GIF 之间的主要区别是什么？
为什么我应该更喜欢一个而不是另一个？什么是 SVG，我应该什么时候使用它？
如果您不关心每个像素，您是否应该始终使用 JPEG，因为它是“最轻”的像素？
问问题
332179 次
14 回答
1441
你应该知道几个关键因素...
- 无损意味着图像变得更小，但不损害质量。
- 有损意味着图像变得（甚至）更小，但会损害质量。如果您一遍又一遍地以有损格式保存图像，图像质量会越来越差。
- 索引意味着图像只能存储有限数量的颜色（通常为 256 种），由作者控制，称为颜色映射
- 直接意味着您可以存储数千种未经作者直接选择的颜色
BMP - 无损/索引和直接
这是一种旧格式。它是无损的（保存时不会丢失图像数据），但也几乎没有压缩，这意味着保存为 BMP 会导致文件非常大。它可以有索引和直接的调色板，但这是一个小小的安慰。文件大小太大，以至于没有人真正使用过这种格式。
适合：真的没什么。BMP 没有什么擅长的，或者没有其他格式做得更好。
GIF - 无损/仅索引
GIF 使用无损压缩，这意味着您可以一遍又一遍地保存图像而不会丢失任何数据。文件大小比 BMP 小很多，因为实际使用了良好的压缩，但它只能存储索引调色板。这意味着对于大多数用例，文件中最多只能有 256 种不同的颜色。这听起来是一笔不小的数目，而且确实如此。
GIF 图像也可以是动画的并且具有透明度。
适用于：徽标、线条图和其他需要很小的简单图像。只真正用于网站。
JPEG - 有损/直接
JPEG 图像旨在通过删除人眼不会注意到的信息来使详细的照片图像尽可能小。因此，它是一种有损格式，并且一遍又一遍地保存同一个文件将导致更多数据随着时间的推移而丢失。它有数千种颜色的调色板，因此非常适合照片，但有损压缩意味着它对徽标和线条图不利：它们不仅看起来模糊，而且与 GIF 相比，此类图像的文件大小也会更大！
适合：照片。还有，渐变。
PNG-8 - 无损/索引
PNG 是一种较新的格式，PNG-8（PNG 的索引版本）确实是 GIF 的一个很好的替代品。然而，遗憾的是，它有一些缺点：首先它不能像 GIF 那样支持动画（它可以，但似乎只有 Firefox 支持它，不像每个浏览器都支持的 GIF 动画）。其次，它对 IE6 等较旧的浏览器存在一些支持问题。第三，像Photoshop这样的重要软件对格式的实现很差。（该死的，Adobe！）PNG-8 只能存储 256 种颜色，比如 GIF。
优点：PNG-8 比 GIF 做得更好的主要方面是支持 Alpha Transparency。
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 透明度。
SVG - 无损/矢量
目前越来越流行的一种文件类型是 SVG，它与上述所有文件类型的不同之处在于它是矢量文件格式（以上都是raster）。这意味着它实际上是由线条和曲线而不是像素组成的。当您放大矢量图像时，您仍然会看到一条曲线或一条线。当您放大光栅图像时，您将看到像素。
例如：
这意味着 SVG 非常适合您希望在 Retina 屏幕或不同尺寸上保持清晰度的徽标和图标。这也意味着一个小的 SVG 徽标可以在更大（更大）的尺寸上使用而不会降低图像质量——这需要一个单独的更大（就文件大小而言）光栅格式的文件。
SVG 文件通常很小，即使它们在视觉上非常大，这很棒。然而，值得记住的是，它确实取决于所使用形状的复杂性。SVG 比光栅图像需要更多的计算能力，因为在绘制曲线和线条时涉及数学计算。如果您的徽标特别复杂，它可能会降低用户的计算机速度，甚至会产生非常大的文件大小。尽可能简化矢量形状很重要。
此外，SVG 文件是用 XML 编写的，因此可以在文本编辑器（！）中打开和编辑。这意味着它的值可以在运行中被操纵。例如，您可以使用 JavaScript 更改网站上 SVG 图标的颜色，就像您更改某些文本（即不需要第二张图像）一样，甚至可以为它们设置动画。
总之，它们最适合简单的平面形状，如徽标或图形。
我希望这会有所帮助！
于 2011-10-13T10:45:33.467 回答
48
对于所有类型的图像（甚至大多数）来说，JPEG 并不是最轻的。角落和直线以及普通的“填充”（纯色块）会显得模糊或有伪影，具体取决于压缩级别。这是一种有损格式，最适合您无法清楚看到伪影的照片。直线（例如图纸和漫画等）在 PNG 中压缩得非常好，而且是无损的。仅当您希望透明度在 IE6 中工作或需要动画时才应使用 GIF。GIF 仅支持 256 色调色板，但也是无损的。
所以基本上这是一种决定图像格式的方法：
- GIF 如果需要在 IE6 上工作的动画或透明度（注意，PNG 透明度在 IE6 之后工作）
- 如果图像是照片，则为 JPEG。
- 如果是漫画或其他绘图中的直线，或者需要具有透明度的宽颜色范围（并且 IE6 不是一个因素），则为 PNG
正如评论所言，如果您不确定哪种格式符合条件，请尝试使用不同压缩比的每种格式，权衡图片的质量和大小，然后选择您认为最好的格式。我只是给出经验法则。
于 2010-02-25T18:25:38.987 回答
7
我通常使用 PNG，因为它似乎比 GIF 有一些优势。过去对 GIF 有专利限制，但已经过期。
GIF 适用于颜色数量有限的锐利线条艺术（例如徽标）。这利用了格式的无损压缩，它有利于颜色均匀且边缘清晰的平坦区域（与 JPEG 相比，它有利于平滑渐变和更柔和的图像）。
GIF 可用于小型动画和低分辨率电影剪辑。
鉴于 GIF 图像调色板的一般限制为 256 色，它通常不用作数码摄影的格式。数码摄影师使用能够再现更大范围颜色的图像文件格式，例如 TIFF、RAW 或有损 JPEG，它们更适合压缩照片。
PNG 格式是 GIF 图像的流行替代品，因为它使用更好的压缩技术并且没有 256 种颜色的限制，但 PNG 不支持动画。MNG 和 APNG 格式都是从 PNG 派生的，都支持动画，但没有被广泛使用。
于 2010-02-25T18:30:25.123 回答
5
GIF 仅限于 256 色，不支持真正的透明度。您应该使用 PNG 而不是 GIF，因为它提供了更好的压缩和功能。PNG 非常适合用于徽标、图标等小而简单的图像。
JPEG 对照片等复杂图像具有更好的压缩效果。
于 2010-02-25T18:29:16.547 回答
5
JPEG 在锐利边缘等周围质量较差，因此它不适合大多数网络图形。它擅长照片。
与 GIF 相比，PNG 提供更好的压缩、更大的调色板和更多功能，包括透明度。而且是无损的。
于 2010-02-25T18:27:16.923 回答
4
有一个技巧可以使用 GIF 图像来显示真实的颜色。可以准备一个 256 帧延迟为 0 帧的 GIF 动画，并将动画设置为只显示一次。因此，可以同时显示所有帧。最后，渲染一个真正的彩色 GIF 图像。
许多软件都能够准备这样的 GIF 图像。但是，输出文件的大小比 PNG 文件大。如果确实需要，必须使用它。
编辑：正如@mwfarnley 提到的，可能会有一些小问题。尽管如此，仍有可能的解决方法。可以在这里看到一个工作示例。最终渲染的图像如下所示：
于 2015-12-30T12:36:14.260 回答
3
png 具有比 gif 更宽的调色板，并且 gif 是专有的，而 png 不是。gif 可以做动画，而 normal-png 不能。png-transparency 仅受大约比 IE6 更新的浏览器支持，但有针对该问题的 Javascript 修复程序。两者都支持 alpha 透明度。一般来说，我会说您应该将 png 用于大多数网络图形，而将 jpeg 用于照片、屏幕截图或类似内容，因为 png 压缩在这些图像上效果不佳。
于 2010-02-25T18:26:23.587 回答
3
GIF 基于每个图像 256 种颜色的调色板（至少在其基本形式中）。PNG 可以做到“TrueColor”，即开箱即用的 1670 万种颜色。无损 PNG 比无损 GIF 压缩得更好。GIF 可以做到“二进制”透明度（0% 不透明度或 100% 不透明度）。PNG 可以处理 alpha 透明度。
总而言之，如果您不需要使用 Alpha 透明图像并支持 IE6，那么当您需要像素完美的图像用于矢量插图等时，PNG 可能是更好的选择。JPG 对于照片来说是无与伦比的。
于 2010-02-25T18:26:49.707 回答
3
截至 2018 年，我们有几种新格式，对以前格式的更好支持以及一些使用视频而不是图像的巧妙技巧。
对于照片
jpg- 仍然是最广泛支持的图像格式。
webp-来自谷歌的新格式。潜力很大，虽然浏览器支持不是很好。
对于图标和图形
svg- 只要有可能。它可以在视网膜屏幕中很好地缩放，在文本编辑器中可编辑，如果加载到 DOM 中，可以通过 JS/CSS 进行自定义。
png- 如果它涉及光栅图形（即在 Photoshop 中创建时）。支持在此用例中非常重要的透明度。
对于动画
svg- 加上矢量图形的CSS动画。svg 的所有优点 + css 动画的力量。
gif- 仍然是最广泛支持的动画图像格式。
mp4- 如果动画图像实际上是短视频剪辑。Twitter / Whatsapp 将 gif 转换为 mp4。
apng- 不错的浏览器支持（即没有 IE、Edge），但创建它不像 gif 那样简单。
webp- 接近使用 mp4。支持不佳
这是对各种动画图像格式的一个很好的比较。
最后，无论是哪种格式，都要确保对其进行优化 - 每种格式都有工具（例如 SVGO、Guetzli、OptiPNG 等），并且可以节省大量带宽。
于 2018-10-17T09:37:09.477 回答
1
主要区别在于 GIF 已获得专利并且得到更广泛的支持。PNG 是一种开放规范，IE6 不支持 alpha 透明度。IE7 中的支持得到了改进，但并未完全修复。
就文件大小而言，GIF 具有较小的默认颜色托盘，因此乍一看它们往往是较小的文件大小。PNG 文件有一个较大的默认托盘，但是您可以缩小它们的颜色托盘，这样当您这样做时，它们会产生比 GIF 更小的文件大小。问题再次是 Internet Explorer 不支持此功能。
此外，由于 PNG 可以支持 alpha 透明度，如果您想要二进制透明度以外的透明度变化，它们是唯一的选择。
于 2010-02-25T18:29:04.547 回答
1
如果您选择 JPEG，并且您正在处理网站的图像，您可能需要考虑免费提供的Google Guetzli感知编码器。根据我的经验，对于固定质量，Guetzli 生成的文件比标准 JPEG 编码库更小，同时保持与 JPEG 标准的完全兼容性（因此您的图像将具有与普通 JPEG 图像相同的兼容性）。
唯一的缺点是 Guetzli 需要花费大量时间进行编码。但是这只完成一次，当您为网站准备图像时，而好处永远存在！较小的图像将花费更少的时间来下载，因此您的网站速度将在日常使用中提高。
于 2017-11-29T14:34:07.563 回答
1
这是包含 WebP 格式的更新答案：
JPEG：
- 创建 JPEG 文件格式是为了优化使用复杂颜色范围的照片和其他图像。
- 保存 JPEG（例如在 Photoshop 中）时，您可以设置要达到的优化级别，从无损意味着没有细节丢失到极度有损。
- 在大多数 Web 应用程序的情况下，您可以将压缩率设置为 75%，而不会丢失太多细节。
何时使用 JPEG？任何时候你有一张具有复杂颜色渐变的照片或图形并且你不能使用 webP。
PNG
- PNG 主要是用于 HQ 计算机生成图像的无损位图图像格式。
- 与 JPEG 不同，它可以有一个透明层。当您在网络上看到透明图像或图形时，它通常是 PNG。
何时使用 PNG？只要您有计算机生成的图形或具有透明度的图像。不建议将 PNG 用于常规照片，因为文件大小通常会明显大于等效的 JPEG 或 webP。
动图：
- GIF 是一种支持图像和动画的 256 色图形格式。
- 回想起来，GIF 通常用于简单的图形，然后慢慢被 JPEG 和 PNG 取代。
- GIF 图片：文件大小低，质量低。它们几乎没有颜色深度，只有 256 种颜色可供使用。用 SVG 替换它们。
- 动画 GIF：它们会很快变得非常大，并且可能会产生巨大的性能问题。用视频替换它们。（例如 Twitter，将所有上传的动画 GIF 转换为标准视频文件，然后共享这些视频文件而不是动画 GIF。）
何时使用 GIF？对于 Web 应用程序，不要这样做！用 SVG 替换 GIF 图像；用视频替换动画 GIF。
SVG
- SVG 是一种 Web 原生图形格式，用于描述直线、曲线和形状，并允许浏览器实时绘制图形。
- SVG 是可扩展的，这意味着图形在任何尺寸下看起来都很好，从小到极大。
- 甚至 CSS 也可以应用于它们。
什么时候使用 SVG？任何时候您有可能需要缩放或需要响应的计算机生成图形 - 例如图标、徽标或图形。
WebP
- 专为网络创建的具有透明度的全新无损和有损图像格式。
- 它旨在成为 JPEG 的替代品，因为它通过增加透明度提供了良好的压缩。
- 所有现代浏览器都支持 WebP，但在旧浏览器中的支持为零，因此现在使用它们需要使用旧图像格式的后备。
什么时候使用 webP？对于图像和计算机图形，如果您知道您的观众将使用更新的浏览器。如果您需要支持较旧的浏览器，请提供对 JPEG 或 PNG 的回退。
于 2021-10-31T16:32:08.177 回答
0
GIF 有 8 位（256 色）调色板，其中 PNG 最高为 24 位调色板。所以，PNG可以支持更多的颜色，当然算法支持压缩
于 2010-02-25T18:27:22.920 回答