图片的格式和使用场景

前端图片的格式和使用场景

GIF

GIF的全称是Graphics Interchange Format，可译为图形交换格式，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。

GIF采用的是Lempel-Zev-Welch（LZW）压缩算法，==最高支持256种颜色==。由于这种特性，==GIF比较适用于色彩较少的图片，比如卡通造型、公司标志==等等。如果碰到需要用24位真彩色的场合，那么GIF的表现力就有限了。

GIF格式图片最大的特性是帧动画，相比古老的bmp格式，尺寸较小，而且支持透明(不支持半透明，因为不支持 Alpha 透明通道 )和动画。

优点
体积小
支持动画
缺点
由于采用了8位压缩，最多只能处理256种颜色

JPEG/JPG

JPEG是Joint Photographic Experts Group(联合图像专家组)的缩写，文件后辍名为”．jpg”或”．jpeg”，是常用的图像文件格式，由一个软件开发联合会组织制定，是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量明显降低，如果追求高品质图像，不宜采用过高压缩比例。

优点
采用有损压缩，压缩后体积更小
支持24位真彩色
支持渐进式加载
缺点
有损压缩会损坏图片的质量
不支持透明/半透明

PNG
png即便携式网络图形是一种无损压缩的位图片形格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。

png支持8位、24位、32位3种，我们通常叫它们png8、png24、png32。

png8

8位的png最多支持256(2的8次方)种颜色，png8有1位的布尔透明通道（要么完全透明，要么完全不透明）。

PNG-8格式与GIF图像类似，同样采用8位调色板将RGB彩色图像转换为索引彩色图像。图像中保存的不再是各个像素的彩色信息，而是从图像中挑选出来的具有代表性的颜色编号，每一编号对应一种颜色，图像的数据量也因此减少，这对彩色图像的传播非常有利。支持透明

更多关于索引色模式看这里

PNG24
支持2的24次方种颜色，即rgb分别用8位，不支持透明。

注意： png24是不透明的，是不透明的，是不透明的。

优点
无损压缩
支持透明、半透明
最高支持24位真彩色图像以及8位灰度图像，从而彻底地消除锯齿边缘。
缺点
不支持动画，如需支持动画还得使用apng

webp格式

啥都好 体积小 无损压缩 颜色丰富 但兼容性不好 ie8以下不支持 ie8+支持

svg格式

绘图的方式呈现图片效果 体积小 放大缩小都不失真的矢量图 ie9+才支持