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

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

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

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

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

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

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

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

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

这也是一个存储动画(动画图像序列)的编解码器。截至2020年，大多数主流浏览器都有开箱即用的支持(兼容性表)。 注意WIC有一个插件可用。

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