jpg、jpeg、png、apng、gif、webp、bmp、base64、svg图片格式比较

Web前端开发，图片保存格式非常的重要，那么该如何选择图片保存的格式呢？

有损 vs 无损

图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。

1）有损压缩

在压缩文件大小的过程中，损失了一部分图片的信息，即降低了图片的质量，并且这种损失是不可逆的，不可能从有一个有损压缩过的图片中恢复出全来的图片。

常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。

2）无损压缩

只在压缩文件大小的过程中，图片的质量没有任何损耗。

任何时候都可以从无损压缩过的图片中恢复出原来的信息。

索引色 vs 直接色

计算机在表示颜色的时候，有两种形式，一种称作索引颜色(Index Color)，一种称作直接颜色(Direct Color)。

1）索引色

用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色，例如：RGB = #55AAFF，对应到计算机系统中，使用一个字节的数字来索引一种颜色。

2）直接色

使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度（ARGB）。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。

点阵图 vs 矢量图

1）点阵图

也叫做位图，像素图。构成点阵图的最小单位是像素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。点阵图缩放会失真，用最近非常流行的沙画来比喻最恰当不过，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒的颜色。

2）矢量图

也叫做向量图。矢量图并不纪录画面上每一点的信息，而是记录了元素形状及颜色的算法，当你打开一张矢量图的时候，软件对图形象对应的函数进行运算，将运算结果（图形的形状和颜色）显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。

jpg、jpeg、png、apng、gif、webp、bmp、base64、svg 图片格式比较

1、jpg / jpeg（Joint Photographic Experts Group）

jpeg 代表Joint Photograhic Experts Group（联合图像专家组），这种格式经常写成JPG（因为早期的Windows只支持3个字母的后缀名，例如 .txt, .png, .html -> .htm），JPG图片的扩展名为jpg。

JPEG是有损的、采用直接色的、点阵图。

jpg的优点是它支持百万种色彩。jpg是一种有损压缩的方式，它会放弃图片的某些细节。所以要是对图片质量的要求不是很高，可以采用jpg的保存方式。那么根据jpg的特点总结出：色彩丰富的照片适合jpg的保存方式，不适合小图标，线条的图片。

JPEG图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损压缩。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。

与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

2、gif（Graphics Interchange Format）

gif是很早应用的一种图片格式。它采用的是lzw的压缩算法进行编码，是无损的、采用索引色的、点阵图。

lzw算法是将长字符串替换成短字符串的的方法来实现压缩。GIF是无损的，采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩，GIF格式的图片大小要远小于BMP格式的图片。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。

gif支持动画，支持透明，支持渐变色彩，同时gif是无损压缩，另外gif是水平压缩，也就是说10*500的图片压缩效果不如500*10的图片。

但是gif得缺点也是相当明显，仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色，就是它只支持256中色彩，所以对于色彩丰富的图片压缩效果不好。

根据gif的这些特点可以总结出：小图标，色彩不丰富的图片适合压缩为gif格式。

GIF格式适用于对色彩要求不高同时需要文件体积较小的场景，比如企业Logo、线框类的图等。因其体积小的特点，现在GIF被广泛的应用在各类网站中。

3、png / apng（Portable Network Graphics）

png 是20世纪90年代推出的一种图片格式，它采用的是无损压缩，其目的是为了取代gif。

png分为png8，png24，png32.这几种主要区别是储存方式不同。

png8只有256色，支持透明（要么全透明，要么不透明）。

png24颜色很多，但是不支持透明，在Photoshop中导出的png24实际是png32.

png32有8位alpha通道，所以它支持透明度的设置。

PNG-8

PNG全称Portable Network Graphics，PNG-8是PNG的索引色版本。PNG-8是无损的、使用索引色的、点阵图。

PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。
现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。当然了，PNG-8本身也是支持动画的，只是浏览器支持得不好，不像GIF那样受到广泛的支持。

PNG-24

PNG-24是PNG的直接色版本。PNG-24是无损的、使用直接色的、点阵图。

无损的、使用直接色的点阵图，听起来非常像BMP，是的，从显示效果上来看，PNG-24跟BMP没有不同。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

虽然PNG-24的一个很大的目标，是替换JPEG的使用。但一般而言，PNG-24的文件大小是JPEG的五倍之多，而显示效果则通常只能获得一点点提升。所以，只有在你不在乎图片的文件体积，而想要最好的显示效果时，才应该使用PNG-24格式。

另外，PNG-24跟PNG-8一样，是支持图片透明度的。

APNG

火狐mozilla提出来的， 24位的，而且也是动图，可以容纳1680万种颜色，也是为了取代GIF

但是只有火狐支持，IE10和chrome，safari全部不行

如果说gif图片是卡片机的话， APNG就是单反，测试浏览器是否支持apng格式

GIF vs APNG：http://littlesvr.ca/apng/gif_vs_apng.html

4、webp

WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩、使用直接色的、点阵图、透明度。

从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

webp 是谷歌开发的旨在增加图片加载速度的图片格式，它压缩后的大小约为jpg的2/3

在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；

在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；

WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

想象Web上的图片之多，百分之几十的提升，是非常非常大的优化。只可惜，目前只有Chrome浏览器和Opera浏览器支持WebP格式，所以WebP的应用并不广泛。为了使用更先进的技术，比如WebP图片格式，来压缩互联网上传输的数据流量，谷歌甚至提供了Chrome Data Compression Proxy，设置了Chrome Data Compression Proxy作为Web代理之后，你访问的所有网站中的图片，在经过Proxy的时候，都会被转换成WebP格式，以降低图片文件的大小。

webp 格式图片支持的浏览器

注：蓝色表示支持，红色表示不支持，Apple Safari 浏览器都不支持 webp，打不开