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

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

JPEG is not the lightest for all kinds of images(or even most). Corners and straight lines and plain "fills"(blocks of solid color) will appear blurry or have artifacts in them depending on the compression level. It is a lossy format, and works best for photographs where you can't see artifacts clearly. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete but is also lossless.

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

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

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

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

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

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

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

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

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

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

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

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