PNG、GIF、JPEG和SVG有哪些不同的用例?

JPEG对于所有类型的图像(甚至不是大多数)都不是最轻的。角、直线和普通的“填充”(纯色块)会根据压缩级别出现模糊或有伪影。这是一种有损格式，最适用于你看不清工件的照片。直线(如图纸和漫画等)在PNG中压缩得非常好，而且是无损的。GIF应该只在你想要在IE6中透明工作或者你想要动画的时候使用。GIF只支持256色调色板，但也是无损的。

这里有一个决定图像格式的方法:

• GIF如果需要在IE6上运行的动画或透明(注意，PNG透明在IE6后工作)
• 如果图像是照片，则为JPEG格式。
• 如果像漫画或其他绘画中的直线，或者如果需要透明的宽颜色范围(IE6不是一个因素)，则使用PNG格式

如上所述，如果你不确定哪种格式合适，可以尝试不同压缩比的每种格式，权衡图片的质量和大小，然后选择一种你认为最好的格式。我只是给出一些经验之谈。

png有一个更广泛的调色板比GIF和GIF是专有的，而png不是。GIF可以做动画，而normal-png不能。png-transparency只有IE6以上的浏览器才支持，但是Javascript已经修复了这个问题。两者都支持alpha透明性。 一般来说，我想说的是，你应该使用png的大多数网络图形，而使用jpeg的照片，截图，或类似的，因为png压缩工作不太好

GIF基于每个图像的256色调色板(至少在其基本的化身)。PNG可以做“真彩色”，即1670万种颜色。无损PNG压缩比无损gif更好。GIF可以做“二进制”透明度(0%不透明度或100%不透明度)。PNG可以处理alpha透明。

总而言之，如果你不需要使用alpha透明图像并且支持IE6，当你需要像素完美的图像来制作矢量插图等时，PNG可能是更好的选择。JPG是无与伦比的照片。

JPEG会有较差的质量在尖锐的边缘等，因此它不适合大多数网络图形。它擅长摄影。

与GIF相比，PNG提供了更好的压缩，更大的调色板和更多的功能，包括透明度。而且它是无损的。

GIF有8位(256色)调色板，而PNG有24位调色板。所以，PNG可以支持更多的颜色，当然算法也支持压缩

主要的区别是GIF是专利，并且得到了更广泛的支持。PNG是一个开放的规范，在IE6中不支持alpha透明度。IE7中的支持得到了改进，但并没有完全修复。

就文件大小而言，GIF有一个较小的默认颜色托盘，所以乍一看它们往往是较小的文件大小。PNG文件有一个更大的默认托盘，但是你可以缩小他们的颜色托盘，这样当你这样做的时候，他们会导致一个比GIF更小的文件大小。问题又来了，这个特性在Internet Explorer中不受支持。

另外，因为png可以支持alpha透明度，所以如果你想要二进制透明度以外的其他透明度，它们是唯一的选择。

GIF只支持256种颜色，不支持真正的透明。你应该使用PNG而不是GIF，因为它提供更好的压缩和功能。PNG非常适合小而简单的图像，如logo、图标等。

JPEG对照片等复杂图像有更好的压缩效果。

我通常使用PNG，因为它似乎比GIF有一些优势。GIF曾经有过专利限制，但现在已经过期了。

动图适用于边缘锐利的线条艺术(如logo)，颜色数量有限。这充分利用了该格式的无损压缩特性，它有利于色彩均匀、边缘清晰的平面区域(与JPEG相反，JPEG有利于平滑的渐变和更柔和的图像)。

动图可以用于小动画和低分辨率的电影剪辑。

鉴于GIF图像调色板的一般限制为256色，它通常不被用作数字摄影的格式。数码摄影师使用的图像文件格式能够再现更大范围的颜色，如TIFF, RAW或有损JPEG，这是更适合压缩照片。

PNG格式是GIF图像的流行替代品，因为它使用了更好的压缩技术，并且没有256色的限制，但PNG不支持动画。MNG和APNG格式都源自PNG，支持动画，但应用并不广泛。

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

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

• 无损的意味着图像变小了，但不会影响质量。
• 有损意味着图像被做得(甚至)更小，但不利于质量。如果你一遍又一遍地保存有损格式的图像，图像质量会越来越差。

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

• 索引意味着图像只能存储有限数量的颜色(通常是256)，由作者控制，在一个叫做颜色地图的东西中
• 直接意味着您可以存储许多成千上万的人颜色，这些颜色不是由作者直接选择的

骨形态发生蛋白 -无损/索引和直接

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

优点:其实没什么。没有什么是BMP擅长的，也没有什么是其他格式做得更好的。

GIF -无损/仅索引

GIF使用无损压缩，这意味着你可以一遍又一遍地保存图像，永远不会丢失任何数据。文件大小比BMP小得多，因为实际上使用了良好的压缩，但它只能存储一个Indexed调色板。这意味着对于大多数用例，在文件中最多只能有256种不同的颜色。这听起来是一个很小的数目，确实如此。

GIF图像也可以被动画化并且具有透明度。

适用于:logo、线条图和其他需要较小的简单图像。只用于网站。

JPEG -有损/直接

jpeg图像的设计目的是通过删除人眼不会注意到的信息，使详细的摄影图像尽可能小。因此，它是一种有损格式，并且反复保存同一个文件将导致随着时间的推移丢失更多的数据。它有数千种颜色的调色板，因此非常适合拍摄照片，但有损压缩意味着它不利于徽标和线条图:不仅看起来模糊，而且这些图像的文件大小与gif相比也会更大!

适用范围:照片。此外,梯度。

PNG-8 -无损/索引

PNG是一种更新的格式，PNG-8 (PNG的索引版本)确实是gif的一个很好的替代品。然而，遗憾的是，它有一些缺点:首先，它不能像GIF那样支持动画(好吧，它可以，但似乎只有Firefox支持它，不像每个浏览器都支持GIF动画)。其次，它对IE6等旧浏览器的支持存在一些问题。第三，像Photoshop这样的重要软件对格式的实现非常差。(该死的Adobe!)PNG-8只能存储256种颜色，就像gif一样。

好处:PNG-8比gif做得更好的主要事情是支持Alpha透明。

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，它与上述所有文件类型不同，因为它是向量文件格式(以上都是光栅)。这意味着它实际上是由直线和曲线组成的，而不是像素。当你放大矢量图像时，你仍然会看到一条曲线或直线。当你放大光栅图像时，你会看到像素。

例如:

这意味着SVG非常适合您希望在Retina屏幕或不同大小的屏幕上保持清晰度的徽标和图标。这也意味着一个小的SVG logo可以在一个更大的尺寸下使用，而不会降低图像质量——这需要一个单独的更大的光栅格式文件(就文件大小而言)。

SVG文件的大小通常很小，即使它们在视觉上非常大，这很好。然而，值得记住的是，它确实取决于所使用的形状的复杂性。svg比栅格图像需要更多的计算能力，因为在绘制曲线和直线时涉及数学计算。如果你的logo特别复杂，它可能会拖慢用户的电脑，甚至有一个非常大的文件。尽可能简化向量形状是很重要的。

此外，SVG文件是用XML编写的，因此可以在文本编辑器中打开和编辑(!)。这意味着可以动态地操纵它的值。例如，你可以使用JavaScript来改变网站上SVG图标的颜色，就像你可以改变一些文本的颜色一样。不需要第二张图片)，甚至是动画。

总之，它们最适合简单的平面形状，比如logo或图形。

我希望这对你有所帮助!

有一个黑客可以使用GIF图像来显示真实的颜色。一个人可以准备一个GIF动画与256色调色帧0帧延迟，并设置动画只显示一次。所以，所有的帧都可以同时显示。最后，一个真正的彩色GIF图像被渲染。

许多软件都能够准备这样的GIF图像。但是，输出文件的大小大于PNG文件。如果确实有必要，就必须使用。

正如@mwfarnley提到的，可能会有小问题。不过，仍有可能的变通办法。你可能会看到一个工作示例在这里。最终渲染的图像是这样的:

full-color-gif-image

如果您选择JPEG，并且正在处理网站的图像，您可能会考虑使用谷歌Guetzli感知编码器，它是免费提供的。根据我的经验，对于一个固定质量的Guetzli生成的文件比标准JPEG编码库更小，同时保持与JPEG标准的完全兼容性(因此您的图像将具有与普通JPEG图像相同的兼容性)。

唯一的缺点是Guetzli需要很多的时间来编码..但这只做一次，当你为网站准备图像时，而好处永远存在!较小的图像将花费更少的时间下载，所以你的网站速度将提高在日常使用。

截至2018年，我们有了几种新的格式，更好地支持以前的格式，以及一些使用视频代替图像的聪明技巧。

# EYZ0

jpg -仍然是最广泛支持的图像格式。

webp - 新格式从谷歌。很好的潜力，虽然浏览器支持不是很好。

图标和图形

svg -只要可能。它在视网膜屏幕上的伸缩性很好，在文本编辑器中可编辑，如果在DOM中加载，则可通过JS/CSS自定义。

png -如果它涉及光栅图形(即在photoshop中创建)。支持透明性，这在这个用例中非常重要。

对于动画

svg -加上css动画矢量图形。svg的所有优点+ css动画的力量。

gif -仍然是最广泛支持的动画图像格式。

mp4 -如果动画图像实际上是短视频剪辑。推特 / Whatsapp将gif转换为mp4。

apng -不错的浏览器支持(即没有IE, Edge)，但创建它不像gif那样简单。

webp -接近使用mp4。可怜的# EYZ1

这是一个很好的各种动画图像格式的比较。

最后，无论哪种格式，都要确保优化它——每种格式都有工具(如SVGO, Guetzli, OptiPNG等)，可以节省大量的带宽。

正如@aarjithn所指出的，WebP是一个用于存储照片的编解码器。

它比GIF有优势，因为它基于视频编解码器< >强VP8 < / >强，并且具有比GIF更广泛的颜色范围，GIF限制为256种颜色，它将其扩展到2²⁴ = 16777216种颜色，仍然节省大量的空间。

以下是包含WebP格式的更新答案:

JPEG格式:

创建JPEG文件格式以优化照片和其他图像
• 当保存JPEG(例如在Photoshop中)时，您可以设置您想要实现的优化级别，从无损意味着没有细节丢失到极度有损。
在大多数情况下，对于web应用程序，你可以设置压缩为 75%，没有太多丢失细节。

何时使用JPEG?任何时候你有一张照片或图形有复杂的颜色梯度，你不能使用webP。

PNG

• PNG主要是一种无损位图图像格式，用于HQ计算机生成图像。
• 与JPEG不同，它可以有一个透明层。当你在网上看到一个透明的图像或图形时，它通常是PNG格式的。

任何时候你有一个计算机生成的图形或透明图像。一般照片不建议使用PNG格式 文件大小通常会明显大于 等价的JPEG或webP.

GIF格式:

• GIF是一种支持图像和动画的256色图形格式。
• 很久以前，动图通常用于简单的图形，然后是慢慢被JPEG和PNG取代。
• 它们几乎没有颜色深度，只有256种颜色可供使用。用svg替换它们。
• 动图:它们可以很快变得非常大，可能会导致巨大的性能问题。把它们换成视频。(以Twitter为例，它将上传的所有动画GIF转换为标准视频文件，然后共享这些视频文件，而不是动画GIF。)

对于web应用程序，不要这样做!用svg替换GIF图像;用视频代替动画gif。

SVG

• SVG是一种web原生图形格式，描述线条、曲线和形状，并允许浏览器实时绘制图形。
• svg是可扩展的，即任何尺寸的图形都很好看，从很小到非常大。
• 甚至CSS也可以应用于它们。

当你有电脑生成的图形时 这可能需要缩放或需要响应-就像一个图标，一个标志或图形

WebP

• 全新的无损有损图像格式的透明度，是专门为网络创建的。
• 它的目标是取代JPEG，因为它提供了良好的压缩，并增加了透明度。
• 所有现代浏览器都支持WebP，但在旧浏览器中不支持，所以现在使用它们需要使用旧的图像格式。

对于图像和计算机图形，如果你知道你的 用户将使用更新的浏览器。如果你需要赡养长辈 浏览器提供JPEG或PNG的回退