重新认识前端开发使用的『图片』

图片在前端开发中非常常用，但是图片的文件格式却是有很多种，平常我们使用的时候可能不会太在意这方面。实际上不同的图片格式有不同的应用的场景，从体验和性能优化的角度考虑也是值得我们学习。下面将简单介绍图片的常见类型。

图片类型介绍

1.PNG

PNG格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可展现256级透明程度。

PNG图片支持无损压缩。

2.JPG（JPEG）

JPG和JPEG其实是一个格式，而且可细分为Baseling-JPG和Progress-JPG两种。两种不同类型的图片各有适用场景，通常来说使用Progress—JPG给用户的体验更好。

JPG支持有损压缩。

1. Baseling-JPG

2. Progressive-JPG

3.GIF

GIF经常用于动画的图片上，支持无损压缩，支持背景透明。

4.SVG

SVG（可缩放矢量图形）这种图片的类型我们可能用得比较少，实际上这种格式的图片优势非常多。

1. 基于可扩展标记语言
2. 采用文本来描述对象
3. 具有交互性和动态性
4. 完全支持DOM

SVG支持无损压缩和背景透明，而且还支持动画。

但是，SVG相比JPG和PNG来说优势这么大为何并没有很广泛的被应用呢？这和SVG的一部分优势相关，因为SVG太过灵活，实际开发中维护SVG图片成本非常高。

5.WebP

WebP是谷歌开发出来的一种图片格式，所以并不是一个通常的标准格式（仅Chrome和Opera支持）。但是WebP因为其自家谷歌浏览器的份额高占有率，同时WebP相比其他常用的图片格式具有更大的优势，实际开发应用还是比较常见。

WebP同时支持无损和有损压缩，支持背景透明。

6.APNG

APNG其实是在PNG的基础上扩展了支持动画的图片文件格式，这也不是一个通用的标准格式（仅Safari和Firefox支持）。

APNG支持无损压缩，背景透明，且额外支持动画。

7.BPG

BPG是一种实验性的图片文件格式，在浏览器使用需要提供js解码，该图片格式并未成为通用标准。但是因为其相比其他图片格式，具有更高压缩比，且支持背景透明和动画，同时支持无损压缩和有损压缩，实际上有希望成为新的主流图片格式。

有损压缩和无损压缩

前面介绍图片的时候提到的无损压缩和有损压缩是什么呢？实际上这个概念适用很多地方（视频，音频等），简单说说这两个的概念。

1.有损压缩

有损压缩是利用了人类对图像或声波中的某些频率成分不敏感的特性，允许压缩过程中损失一定的信息；虽然不能完全恢复原始数据，但是所损失的部分对理解原始图像的影响缩小，却换来了大得多的压缩比。

2.无损压缩

无损压缩格式，是利用数据的统计冗余进行压缩，可完全恢复原始数据而不引起任何失真。

图片里有损压缩牺牲了部分图片细节，以此换来更大的压缩比。

小结

图片格式	支持透明	支持动画	压缩方式	浏览器支持	适用场景
PNG	支持	不支持	无损压缩	所有	需要透明时
JPG	不支持	不支持	有损压缩	所有	通用场景
GIF	支持	支持	无损压缩	所有	简单颜色、动画
SVG	支持	支持	无损压缩	所有	需要良好缩放体验，动态控制图片特效
WebP	支持	不支持	有损压缩和无损压缩	Chrome、Opera	复杂颜色、平台可知
APNG	支持	支持	无损压缩	Firefox、Safari	半透明动画
BPG	支持	支持	有损压缩和无损压缩	无，需要JS解码	极致性能优化

在开发中虽然经常用到了图片，但是对不同的图片格式并没有太多认知，希望通过重新学习图片的知识，增强自己的业务能力。