PNG，GIF，JPEG，SVG有哪些不同的用例？
Answers:
您应该意识到一些关键因素...
- 无损意味着图像会变小，但不会影响质量。
- 有损意味着图像变小（均匀），但有损质量。如果一遍又一遍以有损格式保存图像，则图像质量会越来越差。
- 索引意味着图像只能存储由作者控制的有限数量的颜色（通常为256种），称为“颜色映射”
- 直接表示您可以存储成千上万种作者未直接选择的颜色
BMP-无损/索引和直接
这是一种旧格式。它是无损的（保存时不会丢失图像数据），但几乎没有压缩，甚至没有压缩，这意味着保存为BMP会导致非常大的文件大小。它可以同时具有Indexed和Direct的选板，但这只是一个小小的安慰。文件大小过大，以至于没有人真正使用过这种格式。
优点：什么都没有。BMP并没有其他优势，或者没有其他格式可以做得更好。
GIF-无损/仅索引
GIF使用无损压缩，这意味着您可以一遍又一遍地保存图像，并且永远不会丢失任何数据。文件大小比BMP小得多，因为实际上使用了很好的压缩，但是它只能存储索引调色板。这意味着在大多数情况下，文件中最多只能包含256种不同的颜色。听起来确实很小，确实如此。
GIF图像也可以设置动画并具有透明度。
适用于：徽标，线条图和其他需要较小的简单图像。仅真正用于网站。
JPEG-有损/直接
JPEG图像旨在通过消除人眼不会注意到的信息来使详细的摄影图像尽可能小。结果，这是一种有损格式，一遍又一遍地保存相同的文件将导致随着时间的流逝丢失更多的数据。它具有数千种颜色的调色板，因此非常适合照片使用，但有损压缩意味着它对于徽标和线条图不利：与GIF相比，它们不仅看起来模糊，而且图像文件大小也更大！
擅长：照片。还有，渐变。
PNG-8-无损/索引
PNG是一种较新的格式，PNG-8（PNG的索引版本）确实是GIF的很好的替代品。但是，令人遗憾的是，它有一些缺点：首先，它不能像GIF一样支持动画（可以，但是，Firefox似乎支持它，这不同于每个浏览器都支持的GIF动画）。其次，它与IE6等旧版浏览器存在一些支持问题。第三，像Photoshop这样的重要软件对该格式的实现非常差。（该死，Adobe！）PNG-8只能存储256种颜色，如GIF。
优点：PNG-8比GIF更好的主要功能是支持Alpha Transparency。
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是目前越来越流行的文件类型，它与上述所有文件都不同，它是矢量文件格式（以上均为raster）。这意味着它实际上是由直线和曲线而不是像素组成的。放大矢量图像时，仍然会看到曲线或直线。放大光栅图像时，将看到像素。
例如：
这意味着SVG非常适合您希望在Retina屏幕或其他尺寸上保持清晰度的徽标和图标。这也意味着较小的SVG徽标可以以更大（更大）的尺寸使用而不会降低图像质量-某些情况下，这需要单独使用光栅格式的更大（就文件大小而言）文件。
SVG文件的大小通常很小，即使它们在视觉上非常大，这也很棒。值得记住的是，它确实取决于所使用形状的复杂性。SVG比栅格图像需要更多的计算能力，因为绘制曲线和线涉及数学计算。如果徽标特别复杂，则可能会减慢用户计算机的速度，甚至会导致文件很大。重要的是要尽可能简化矢量形状。
此外，SVG文件是用XML编写的，因此可以在文本编辑器（！）中打开和编辑。这意味着可以随时操纵其值。例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您要输入一些文本（即不需要第二张图像），甚至对其进行动画处理一样。
总之，它们最适合徽标或图形之类的简单平面形状。
希望对您有所帮助！
JPEG不是所有类型（甚至大多数）图像中最轻的。拐角和直线以及纯色的“填充”（纯色块）将视模糊程度而变模糊或出现伪影。这是一种有损格式，最适合无法清晰看到伪影的照片。直线（例如在绘图和漫画中）在PNG中非常好地压缩，并且无损。仅当您希望透明度在IE6中工作或希望动画时才应使用GIF。GIF仅支持256色调色板，但也无损。
因此，基本上，这是一种决定图像格式的方法：
- 如果需要在IE6上可以使用动画或透明度的图片，则为GIF（请注意，PNG透明度在IE6之后可以使用）
- 如果图像是照片，则为JPEG。
- 如果是漫画或其他图形中的直线，或者需要宽的颜色范围且具有透明度（而IE6不在考虑范围之内），则为PNG
而且如前所述，如果您不确定该选择哪种格式，请尝试使用不同压缩率的每种格式，然后权衡图片的质量和尺寸，然后选择您认为最合适的格式。我只是给出经验法则。
我通常会使用PNG，因为它似乎比GIF有一些优势。GIF曾经有专利限制，但是这些限制已经过期。
GIF适用于颜色数量有限的锐利线条艺术（例如徽标）。这充分利用了格式的无损压缩功能，该功能有利于边缘清晰的均匀颜色的平坦区域（而JPEG则有利于平滑渐变和柔和图像）。
GIF可以用于小型动画和低分辨率影片剪辑。
鉴于GIF图像调色板的一般限制为256色，因此通常不将其用作数字摄影的格式。数码摄影师使用能够再现更大范围色彩的图像文件格式，例如TIFF，RAW或有损JPEG，它更适合于压缩照片。
PNG格式是GIF图像的一种流行替代方法，因为它使用了更好的压缩技术，并且没有256种颜色的限制，但是PNG不支持动画。均源自PNG的MNG和APNG格式支持动画，但并未得到广泛使用。
截至2018年，我们有几种新格式，对以前格式的更好支持以及一些使用视频而不是图像的巧妙技巧。
对于照片
jpg -仍然是最广泛支持的图像格式。
webp- 来自Google的新格式。潜力很大，尽管浏览器支持不是很好。
用于图标和图形
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等），可以节省大量带宽。
如果您选择JPEG，并且正在处理网站的图像，则可能需要考虑免费使用Google Guetzli感知编码器。以我的经验，在保持固定质量与JPEG标准完全兼容的情况下，Guetzli会生成比标准JPEG编码库小的文件，同时保持与JPEG标准的完全兼容性（因此，您的图像将具有与普通JPEG图像相同的兼容性）。
唯一的缺点是Guetzli需要花费大量时间进行编码..但是，当您为网站准备图像时，只完成一次，而好处永远存在！较小的图像将花费较少的时间下载，因此您的网站速度在日常使用中将提高。
GIF具有8位（256色）调色板，其中PNG高达24位调色板。因此，PNG可以支持更多颜色，当然算法也支持压缩