前端图片的常见格式

目录

图片格式是计算机存储图片的方式，有许多不同的类型。前端常见的图片格式包括：

JPEG：

PNG：

GIF：

WEBP：

base64 ：

bmp：

补充：

TIFF：

---

图片格式是计算机存储图片的方式，有许多不同的类型。前端常见的图片格式包括：

jpg：

扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节

丢弃了）。

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

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

页中很常见。

png ：

扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。

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

使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司 logo 图、重要配

图等。

是一种带透明通道的无损压缩格式，适用于网页和摄影。它支持透明背景和有损压缩，但不支持多种格式的转换。

gif：

扩展名为 .gif ，仅支持 256 种颜色，色彩呈现不是很完整。

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

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

是一种带透明通道的无损压缩格式，适用于网页和动画。这是最适合动图和表情包的格式。

webp：

扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。

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

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

base64 ：

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

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

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

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

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

bmp：

扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。

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

态图。

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

用）

补充：

TIFF：

扩展名为.tif或.tiff，是一种无损压缩的图像文件格式，可以支持多种颜色模式、透明度和多个通道。

主要特点：所储存的图像信息更完整，有利于原稿的复制，并且可以方便地在不同的应用程序间调用图形文件。

使用场景：印刷出版和存档中有广泛的应用。

PSD：

扩展名为.psd全称Photoshop Document，是Adobe Photoshop的专用图像格式。它支持图层、通道、蒙版和各种调整层，这些功能使得PSD格式成为图像设计和编辑中的首选格式。是Adobe Photoshop的专用图像格式，方便修改和保留。