图片格式

常见图片格式

在前端开发中，图片是最常见的资源之一。了解不同图片格式的特点和适用场景，有助于在性能优化和设计还原时做出正确的选择。

---

• JPG / JPEG
• PNG
• GIF
• WebP
• ICO
• BMP
• TIF / TIFF
• 总结

---

JPG / JPEG

JPEG 是全球使用最广泛的图片格式，1992 年由联合图像专家组创建。扩展名常写为 .jpg，是因为早期系统只支持 3 个字符的文件后缀。

特点：

• 采用有损压缩算法，会丢弃肉眼难以分辨的细节。
• 文件体积小，适合网络分享和日常存储。
• 不支持透明背景。

适用场景：照片、复杂图像、网页中的大图背景。

---

PNG

PNG 是全球第二流行的图片格式，支持透明背景。

特点：

• 采用无损压缩算法，保留完整图像数据，画质清晰。
• 文件体积比 JPG 大。
• 支持透明通道，可以做半透明效果。

适用场景：网页设计、图标、需要透明背景或高画质的场景。

---

GIF

GIF 支持动画效果，文件中包含多帧图像，按顺序循环播放，可调节播放速度，同时支持透明背景。

特点：

• 文件体积随帧数增加而增大。
• 颜色数量有限（最多 256 色）。
• 不支持半透明，只有透明或不透明两种状态。

适用场景：简单动图、表情包。

---

WebP

WebP 是谷歌于 2010 年推出的现代图片格式。

特点：

• 同时支持有损和无损压缩。
• 兼顾画质与体积，通常比 JPG 和 PNG 更小。
• 支持动画和透明图层。
• 目前主流浏览器均已支持。

适用场景：网站图片、谷歌服务，能显著提升网页加载速度。

---

ICO

ICO 是 Windows 系统图标默认格式，1985 年随 Windows 1.0 推出。

特点：

• 支持透明背景和无损压缩。
• 文件体积小，最大分辨率 256×256。
• 一个文件可以包含多个尺寸的图像，系统会根据显示场景自动适配。

适用场景：网站图标（favicon）、Windows 软件图标。

---

BMP

BMP 是微软早期创建的位图格式。

特点：

• 几乎不压缩，保留原始画质。
• 文件体积极大。
• 读取速度快，无需解码。

适用场景：早期编程项目、性能较弱的工业设备，如今已很少使用。

---

TIF / TIFF

TIF 是设计和打印领域常用的格式。

特点：

• 采用无损压缩或不压缩，画质极高。
• 文件体积大。
• 支持透明背景，一个文件可包含多幅图像。

适用场景：专业设计、印刷场景。

---

总结

格式	压缩方式	透明背景	动画	文件体积	典型场景
JPG	有损	不支持	不支持	小	照片、网页大图
PNG	无损	支持	不支持	较大	图标、透明图片
GIF	无损（色彩有限）	支持（不半透明）	支持	随帧数增大	简单动图、表情包
WebP	有损/无损	支持	支持	较小	现代网页图片
ICO	无损	支持	不支持	小	网站图标、软件图标
BMP	几乎不压缩	不支持	不支持	极大	早期项目、工业设备
TIF	无损	支持	不支持	大	设计、印刷

在日常开发中，优先考虑 WebP，兼容性问题再回退到 JPG 或 PNG。GIF 可用于简单动图，但现代浏览器中 WebP 动画或视频（如 MP4）通常是更好的选择。ICO 专门用于网站图标。BMP 和 TIF 基本不用于 Web 场景。