何时使用 JPG

• 摄影图像
• 当压缩无关紧要时

何时使用 PNG

• 当你需要透明度时
• 当你有图案时（背景）

何时使用 GIF

• 当您需要向后兼容的动画时*
• 当图像主要由少数几种颜色组成时 (2-16)**
• 当您不需要透明度并且有图案时（尽管首选 png）

_{* 随着 CSS 动画作为几乎所有浏览器的可行选项的兴起， .GIF 格式的使用越来越少成为网络动画的首选格式。.jpg, .png, 和.gif都可以使用 CSS 设置为具有“动画”功能。尽管在某些情况下，动画 gif可能会在网页设计中吸引人地使用，但例外情况很少见，因此最好避免使用它们。}

_{**（.gif图像在其调色板中仅限于 256 种颜色。）}

（从重复的问题迁移）

这完全取决于您要存储的图像类型。

• PNG是一种无损压缩格式，最适合“类矢量”位图图形（即具有相同颜色和清晰边缘的大而规则区域的图形；包含明文文本的图形）。

• SVG是一种矢量格式，最适合包含矢量图形（简而言之，几何元素的集合而不是像素的集合）。SVG 可无限扩展，而位图图形在放大时会降低质量。

• JPG是一种有损压缩格式（除其他外，它消除了人眼看不到的图像中的细微差别以节省存储空间）。它最适合照片；由于其压缩方法，它不太适合矢量插图或文本。

浏览器兼容性：

• 跨浏览器支持 PNG 图形，IE 6 除外，如果 PNG 包含 alpha 透明度（透明部分将呈现为纯灰色），以及所有版本的 IE，如果 PNG 位于不透明度小于 100 的 HTML 元素内% （但这是一个边缘情况）。

• SVG 并不总是一种选择，因为目前浏览器支持不是 100%。<img>正常标签也可能存在其他行为差异。仅当您知道自己在做什么时才使用它。

• 只要以 RGB 模式而不是 CMYK 保存，所有浏览器都支持标准 JPG（如果您的程序没有区分，它可能是默认设置）。

你应该知道几个关键因素...

首先，有两种类型的压缩：无损和有损。

• 无损意味着图像变得更小，但不损害质量。
• 有损意味着图像变得（甚至）更小，但会损害质量。如果您一遍又一遍地以有损格式保存图像，图像质量会越来越差。

还有不同的颜色深度（调色板）：索引颜色和直接颜色。

• 索引意味着图像只能存储有限数量的颜色（通常为 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。

重要提示： Photoshop 终于在其最新版本中添加了对 Alpha 透明度的支持。不过，如果您有一个较旧的文件，有一些方法可以将 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 透明度。

SVG - 无损/矢量

目前越来越流行的一种文件类型是 SVG，它与上述所有文件类型的不同之处在于它是矢量文件格式（以上都是raster）。这意味着它实际上是由线条和曲线而不是像素组成的。当您放大矢量图像时，您仍然会看到一条曲线或一条线。当您放大光栅图像时，您将看到像素。

例如：

这意味着 SVG 非常适合您希望在 Retina 屏幕或不同尺寸上保持清晰度的徽标和图标。

此外，SVG 文件是使用 XML 编写的，因此可以在文本编辑器中打开和编辑，如果您愿意，可以随时对其进行操作。例如，您可以使用 JavaScript 更改网站上 SVG 图标的颜色，就像更改某些文本一样（即不需要第二张图像）。

我希望这会有所帮助！

JPG：

优点 ：

• 许多不同的压缩级别可用
• 易于使用所有图像编辑器进行操作

不便之处：

• 压缩伪影

用途：

• 有很多颜色的大照片或图像
• 需要高压缩时

PNG：

优点 ：

• 透明度与阿尔法！
• 很多颜色
• 可以代替jpg

不便之处：

• 比 JPG 压缩更少（但不是那么多）
• 与 IE6（我相信是 7）不兼容 - 必须为此使用补丁或破解。但谁在乎？必须使用;)

用途：

• 色彩丰富的中小型照片/图像
• 如果您想要渐变透明度，必须使用
• 图标
• 标志

动图：

优点 ：

• 可以动画
• 如果您只使用一些颜色（如 8 - 16 或 32 种不同颜色），则非常轻
• 透明度

不便之处：

• 不能超过 255 种颜色。
• gif动画可以让人逃跑
• 没有透明度的alpha（它是否透明！）

用途：

• 动画 gif（我主要在时事通讯中使用它们）
• 图标
• 动画图标 \o/
• 标志