常见图片格式（HTML）

1，jpg格式：

概述：是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。

主要特点：支持的颜色丰富，占用空间较小，不支持透明背景，不支持动态图。

使用场景：对图片细节没有极高要求的场景，如：网站的产品宣传图。

2，png格式：

概述：是一种有损的压缩格式，能够更高质量的保存图片。

主要特点：支持的颜色丰富，占用空间略大，支持透明背景，不支持动态图。

使用场景：（1）想让图片有透明背景；（2）想要更高质量的呈现图片；如：logo图，重要配图。

3，bmp格式：

概述：不进行压缩的一种格式，在最大程度上保留图片更多的细节。

主要特点：支持的颜色丰富，保留的细节更多，占用空间极大，不支持透明背景，不支持动态图。

使用场景：对图片细节要求极高的场景，如：一些大型游戏中的图片。

4，gif格式：

概述：仅支持256种颜色，色彩呈现不是很完整。

主要特点：支持的颜色较少，支持简单透明背景，支持动态图。

使用场景：网页中的动态图。

5，webp格式：

概述：谷歌推出的一种格式，专门用来在网页中呈现图片。

主要特点：具备上述几种格式的优点，兼容性不太好，一旦使用务必解决兼容性问题。

使用场景：网页中的各种图片。

6，base64格式：

（1）本质：把图片转为一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。

（2）原理：把图片进行base64编码，形成一串文本。

（3）如何生成：靠一些工具或网站。

（4）如何使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响。

（5）使用场景：一些较小的图片，或者需要和网页一起加载的图片。

（6）只需要将文本转换为图片就行，不用发请求得到图片，节约文件请求次数。

（7）img标签不高亮了