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

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

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

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

截至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等)，可以节省大量的带宽。

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

JPEG格式:

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

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

PNG

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

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

GIF:

GIF is a 256 color graphic format supporting both images and animations. Way back, GIFs were often used for simple graphics and then were slowly replaced by JPEG and PNG. GIF Images: Low file size and low quality. They have almost no colored depth they only have 256 colors to work with. Replace them with SVGs. Animated GIF: They can become very large very quickly and can potentially create huge performance issues. Replace them with videos. (Twitter for example, converts all animated GIFs that are uploaded into standard video files and then share those video files instead of the animated GIF.)

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

SVG

SVG是一种网络原生图形格式，描述线条、曲线和形状，并允许浏览器实时绘制图形。 svg是可伸缩的，这意味着图形在任何尺寸下都很好看，从很小到非常大。 甚至CSS也可以应用于它们。

什么时候使用SVG?只要你有电脑生成的图形 这可能需要缩放或需要响应-就像一个图标，一个标志或图形。

WebP

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

什么时候使用webP?图像和计算机图形，如果你知道你的 用户将使用更新的浏览器。如果你需要赡养长辈 浏览器提供JPEG或PNG的备选方案。

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

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

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