常见图片格式
1.jpg
格式:
- 概述:扩展名为
.jpg
或jpeg
,是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。- 主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
- 使用场景:对图片细节没有极高要求的场景,例如:网站的产品宣传图等。——该格式网页中很常见。
2.png
格式:
- 概述:扩展名为
.png
,是一种无损的压缩格式,能够更高质量地保存照片。- 主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
- 使用场景:①想让图片有透明背景;②想更高质量地呈现图片;例如:公司logo图、重要配图等。
3.bmp
格式:
- 概述:扩展名为
.bmp
,不进行压缩的一种格式,在最大程度上保留图片更多的细节。- 主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
- 使用场景:对图片的细节要求极高的场景,例如:一些大型游戏中的图片。(网页中很少使用)
4.gif
格式:
- 概述:扩展名为
.gif
,仅支持256种颜色,色彩呈现不是很完整。- 主要特点:支持的颜色较少、支持简单透明背景、支持动态图。
- 使用场景:网页中的动态图片。
5.webp
格式:
- 概述:扩展名为
.webp
,谷歌推出的一种格式,专门用来在网页中呈现图片。- 主要特点:具备上述几种格式的优点,但兼容性不太好,一旦使用务必要解决兼容性问题。
- 使用场景:网页中的各种图片。
6.base64
格式:
- 本质:一串特殊的文本,要通过浏览器打开,传统看图应用通常无法打开。
- 原理:把图片进行
base64
编码,形成一串文本。- 如何生成:靠一些工具或网站。
- 如何使用:直接作为
img
标签的src
属性的值即可,并且不受文件位置的影响。- 使用场景:一些较小的图片,或者需要和网页一起加载的图片。
图片的格式非常多,上面这些,只是一些常见的、开发中常接触到的。