PNG与GIF vs. JPEG与SVG – 何时最好使用？
何时应该build立网站或接口等使用某些图像文件types？
他们的优点和缺点是什么？
我知道PNG和GIF是无损的，而JPEG是有损的。
但是，PNG和GIF的主要区别是什么？
为什么我应该比另一个更喜欢？ 什么是SVG，我应该什么时候使用它？
如果你不关心每一个像素，你应该总是使用JPEG，因为它是“最轻”的？
你应该知道一些关键因素…
首先，有两种types的压缩： 无损和有损 。
- 无损意味着图像变小，但不影响质量。
- 有损意味着图像被制造（甚至）更小，但是损害质量。 如果您一次又一次地以有损格式保存图像，则图像质量会越来越差。
也有不同的颜色深度（调色板）： 索引颜色和直接颜色 。
- 索引意味着图像只能存储由作者控制的有限数量的颜色（通常为256），称为颜色映射
- 直接意味着您可以存储数千种作者未直接select的颜色
BMP – 无损/索引和直接
这是一个旧的格式。 它是无损的（保存时没有图像数据丢失），但是也几乎没有任何压缩，这意味着将BMP保存为非常大的文件大小。 它可以有索引和直接的调色板，但这是一个小小的安慰。 文件大小是如此之大，以至于没有人真的使用过这种格式。
好：没什么。 没有任何BMP擅长或者没有其他格式做得更好。
GIF – 无损/仅索引
GIF使用无损压缩，这意味着您可以反复保存图像，永不丢失任何数据。 文件大小比BMP小得多，因为实际使用的是良好的压缩，但它只能存储一个Indexed调色板。 这意味着对于大多数使用情况 ，文件中最多只能有256种不同的颜色。 这听起来像是一个很小的数字，而且是。
GIF图像也可以是animation和透明度。
适用于：标志，线条图和其他简单的图片，需要很小。 只有真正用于网站。
JPEG – 有损/直接
JPEG图像被devise成通过去除人眼不会注意到的信息来尽可能小地制作详细的照片图像。 因此，这是一种有损耗的格式，反复保存相同的文件会导致更多的数据随着时间stream逝而丢失。 它具有上千种颜色的调色板，对于照片来说非常适合，但是有损压缩意味着对于徽标和线条图不利：不仅它们看起来模糊，而且与GIF相比，这样的图像也将具有更大的文件尺寸！
适合：照片。 另外，渐变。
PNG-8 – 无损/索引
PNG是一种更新的格式，而PNG-8（PNG的索引版本）确实是GIF的好替代品。 然而令人遗憾的是，它有一些缺点：首先它不能支持像GIF那样的animation（好吧它可以，但只有Firefox似乎支持它，不像每个浏览器支持的GIFanimation）。 其次它与IE6等旧浏览器有一些支持问题。 第三，像Photoshop这样重要的软件格式的实现很差。 （该死的，Adobe！）PNG-8只能存储256种颜色，比如GIF。
好处：PNG-8比GIF更好的主要是支持Alpha透明度。
PNG-24 – 无损/直接
PNG-24是一种将无损编码和直接颜色（数千种颜色，如JPEG）结合在一起的优秀格式。 在这方面，它非常像BMP，除了PNG实际上是压缩图像，所以会产生更小的文件。 不幸的是，PNG-24文件仍然会比JPEG（照片）和GIF / PNG-8（用于徽标和graphics）更大，所以您仍然需要考虑是否真的想要使用它。
尽pipePNG-24在压缩的同时可以容纳数千种颜色，但并不是要取代JPEG图像。 保存为PNG-24的照片可能至less比相应的JPEG图像大5倍，可见质量的改善很小。 （当然，如果您不关心文件大小，并希望获得最佳质量的图像，这可能是一个理想的结果。）
就像PNG-8一样，PNG-24也支持alpha透明。
SVG – 无损/vector
目前越来越受欢迎的文件types是SVG，它与上述不同之处在于它是vector文件格式（以上都是栅格 ）。 这意味着它实际上是由线和曲线而不是像素组成的。 放大vector图像时，仍然会看到一条曲线或一条线。 放大光栅图像时，您将看到像素。
例如：
这意味着SVG是完美的标志和图标，你希望在Retina屏幕上保持清晰度或不同的尺寸。 这也意味着一个小的SVG标志可以使用在一个更大的尺寸 – 否则将需要一个单独的光栅格式的大文件。
SVG文件大小通常很小，即使它们在视觉上非常大，这是很好的。 然而，值得铭记的是，它取决于所使用形状的复杂性。 由于math计算涉及绘制曲线和线条，因此SVG需要比光栅图像更多的计算能力。 如果您的标志特别复杂，可能会降低用户的电脑速度，甚至会造成非常大的文件大小。 尽可能简化vector形状非常重要。
另外，SVG文件是用XML编写的，所以可以在文本编辑器（！）中打开和编辑。 这意味着它的价值可以在飞行中操纵。 例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您对某些文本（即不需要第二张图像），甚至可以为它们设置animation一样。
总之，它们最适合简单的平面形状，如标志或graphics。
我希望有帮助！
JPEG不是各种图像（甚至大多数）最轻的。 根据压缩级别的不同，angular落和直线以及简单的“填充”（纯色块）将显得模糊或产生伪像。 这是一个有损的格式，最适合照片，你不能清楚地看到文物。 直线（如图纸和漫画等）压缩在PNG非常好，它是无损的。 GIF只能用于你想要透明度在IE6中工作或者你想要animation。 GIF只支持256色调色板，但也是无损的。
所以基本上这是决定图像格式的一种方法：
- GIF如果需要animation或透明度在IE6上工作（注意，PNG透明度在IE6之后工作）
- JPEG如果图像是照片。
- PNG如果直线在漫画或其他图纸，或者如果宽的色彩范围需要透明度（和IE6不是一个因素）
正如所评论的那样，如果您不确定什么样的资格，请尝试使用不同压缩比率的每种格式，并权衡图片的质量和大小，并select您认为最好的一种。 我只是给出了经验法则。
谷歌已经写得很好。 从select正确的图像格式 ，你可以find一个stream程图做出决定：
我通常会使用PNG，因为它似乎比GIF有一些优势。 曾经有GIF的专利限制，但已过期。
GIF适合边缘锐利的艺术品（如标志），颜色有限。 这利用了格式的无损压缩，这有利于颜色均匀的平坦区域，边缘明确（与JPEG，这有利于平滑渐变和柔和的图像）。
GIF可用于小animation和低分辨率电影剪辑。
鉴于GIF图像调色板对256种颜色的一般限制，它通常不被用作数字摄影的格式。 数码摄影师使用的图像文件格式能够再现更大范围的色彩，如TIFF，RAW或有损JPEG，这是更适合压缩照片。
PNG格式是GIF图像的stream行替代品，因为它使用更好的压缩技术，并且没有256色的限制，但是PNG不支持animation。 MNG和APNG格式都源自PNG，支持animation，但没有被广泛使用。
JPEG在锐利边缘等方面质量差，因此不适用于大多数网页graphics。 它擅长照片。
与GIF相比，PNG提供更好的压缩，更大的调色板和更多的function，包括透明度。 而且是无损的。
GIF限于256种颜色，不支持真正的透明度。 您应该使用PNG而不是GIF，因为它提供了更好的压缩和function。 PNG非常适用于像徽标，图标等小而简单的图像。
JPEG可以更好地压缩照片等复杂图像。
PNG有一个比GIF更广泛的颜色盘，GIF是适当的，而PNG不是。 gif可以做animation，什么normal-png不能。 png-transparency只支持比IE6更近的浏览器，但是对于这个问题有一个Javascript修正。 两者都支持alpha透明度。 一般来说，我会说，你应该使用PNG的大多数的Webgraphics，而使用JPEG照片，截图，或类似，因为PNG压缩不太好的工作。
GIF基于每个图像256色的调色板（至less在其基本化身中）。 PNG可以做“TrueColour”，即1670万种颜色。 无损PNG压缩比无损GIF更好。 GIF可以做“二元”透明度（0％不透明度或100％不透明度）。 PNG可以处理Alpha透明胶片。
总而言之，如果您不需要使用Alpha透明图像并支持IE6，那么当您需要像素完美的vector插图等图像时，PNG可能是更好的select。 JPG是照片无与伦比的。
有一个黑客可以做到使用GIF图像来显示真实的颜色。 可以准备一个带有256帧调色框的GIFanimation，延迟时间为0帧，并将animation设置为只显示一次。 所以，所有的帧都可以同时显示。 最后，渲染一个真正的彩色GIF图像。
许多软件都能够抓住这样的GIF图像。 但是，输出文件的大小比PNG文件大。 必须使用它，如果真的有必要的话。
GIF的主要区别是获得专利并得到更广泛的支持。 PNG是一个开放的规范，在IE6中不支持alpha透明。 IE7的支持得到了改进，但并没有完全修复。
就文件大小而言，GIF有一个较小的默认颜色托盘，所以他们乍一看往往是较小的文件大小。 PNG文件有一个较大的默认托盘，但是您可以缩小它们的颜色托盘，这样，当您这样做时，它们会导致比GIF更小的文件大小。 再次的问题是这个function不像Internet Explorer那样受到支持。
此外，因为PNG可以支持alpha透明度，所以如果您想要透明度以外的透明度变化，它们是唯一的select。
GIF有8位（256色）调色板，其中PNG为24位调色板。 所以，PNG可以支持更多的颜色，当然algorithm支持压缩
