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格式

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

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会导致非常大的文件大小。它可以有索引和直接的调色板，但这是一个小小的安慰。文件的大小是如此不必要的大，以至于没有人真正使用这种格式。

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

---

GIF -无损/仅索引

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

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

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

---

JPEG -有损/直接

JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. As a result it's a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it's bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!

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

---

PNG-8 -无损/索引

PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.

好处: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年，我们有了几种新的格式，更好地支持以前的格式，以及一些使用视频代替图像的聪明技巧。

的照片

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

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

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

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

以下是包含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的备选方案。