JPEG、GIF、PNG、WebP、Base64、SVG的优缺点

基本策略： svg > webp > png/gif > jpeg

矢量图 SVG

矢量图中的图形元素用一个对象来表示，包括颜色、大小、形状及屏幕位置等属性。适合用在文本、品牌logo、控件图标及二维码等构图形状比较简单的几何图形。 SVG是一种基于XML格式的图像格式，其全称是Scalable Vector Graphics(可缩放的矢量图形),目前几乎所有的浏览器都支持SVG。

• 优点：能够在任何缩放比例下呈现出细节同样清晰的展示效果。
• 缺点：对足够复杂的图像来说，比如要达到照片的效果，若通过SVG进行矢量图绘制，则所得的文件过大。

位图

位图是通过对一个矩阵中的栅格进行编码来表示图像的，每个栅格只能编码表示一个特定的颜色，如果组成图像的栅格像素点越多且每个像素点所能表示的颜色范围越广，则位图图像整体的显示效果就会越逼真。

JPEG

JPEG是一种有损压缩算法，它通过去除相关冗余图像和色彩数据等方式来获得较高的压缩率，同时还能展现出相当丰富的图像内容。 JPEG在网站开发中经常被用作背景图、轮次图等，以呈现色彩丰富的内容。但由于是有损压缩，当处理Logo或者图标时，需要较强线条感和强烈颜色对比，JPEG图像可能会出现一些边界模糊的不佳体验，另外JPEG图像并不支持透明度。 JPEG包含了多种压缩模式，其中常见的有基于基线的、渐进式的。

基线式的JPEG加载顺序是自上而下的，当网络连接缓慢或不稳定时，其是从上往下逐渐加载完成的。 渐进式模式是将图像文件分为多次扫描，首先展示一个低质量模糊的图像，随着扫描到的图像信息不断增多，每次扫描过后所展示的图像清晰度也会不断提升。

• 优点：压缩比高，对于网络环境不好的情况下，首先能快速加载出一个图像质量比较模糊的预览版本，这样用户便可据此了解图像的大致内容。
• 缺点：不支持透明度。

GIF(Graphics Interchange Format)

• 缺点：支持颜色有限、作为动画解码不如视频。

PNG

PNG是一种无损压缩的高保真图片格式，相比于JPEG，PNG支持透明度，对线条的处理更细腻，并增强了色彩的表现力，不过唯一不足是文件体积过大。

• 优点：支持透明且色彩表现力强。
• 缺点：文件尺寸大。

Webp

WebP是Google在2010年推出的一种图像文件格式，它的目标是以较高的视觉体验为前提的，尽可能地降低有损压缩和无损压缩后的文件尺寸，同时还要支持透明度与动画。

Base64

Base64并不是一种图像文件格式，而是一种用于传输8位字节码的编码方式，它通过将代表图像的编码直接写入HTML或CSS中来实现图像的展示，所以用他来存放图像信息就不需要发起网络请求。但是，一般经过Base64编码后的图像大小，会膨胀四分之三，所以，只有对于小图而言，Base64才能体现出真正的性能优势。