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