Web 常用的图片格式有 JPEG、PNG、GIF、WebP、AVIF 几种，它们在清晰度、体积、功能特性上各有差异，以下是一张清晰的对比表，帮你快速选择：
|
特性 |
JPEG (JPG) |
PNG-8 / PNG-24 |
GIF |
WebP |
AVIF |
|---|---|---|---|---|---|
|
压缩方式 |
有损压缩 |
无损压缩 |
无损压缩 |
有损 / 无损压缩 |
有损 / 无损压缩 |
|
透明支持 |
❌ 不支持 |
✅ 支持（PNG-24 半透明） |
✅ 支持（1 位透明） |
✅ 支持（半透明） |
✅ 支持（半透明） |
|
色彩深度 |
24 位（真彩色） |
PNG-8：8 位；PNG-24：24 位 |
8 位（256 色） |
8-24 位 |
10-12 位（高动态范围） |
|
动画支持 |
❌ 不支持 |
❌ 不支持 |
✅ 支持 |
✅ 支持 |
✅ 支持 |
|
体积大小 |
中等（有损压缩） |
较大（无损） |
小（低色彩） |
极小（比 JPEG 小 25-35%） |
最小（比 WebP 小 20-50%） |
|
清晰度表现 |
色彩丰富图清晰，高压缩会模糊 |
完全清晰，无失真 |
色彩少的图清晰，色彩多则失真 |
清晰度接近原图，压缩率极高 |
清晰度优于 WebP，支持 HDR |
|
浏览器兼容性 |
全兼容 |
全兼容 |
全兼容 |
现代浏览器兼容（IE 不支持） |
较新浏览器支持 |
|
适用场景 |
照片、风景、色彩丰富的图 |
图标、Logo、透明背景图 |
简单动图、低色彩小图标 |
所有 Web 图（追求小体积） |
高清大图、HDR 图、动图 |
核心选择建议（清晰 + 小体积）
-
优先选 WebP 它是目前平衡清晰度和体积的最佳选择，有损压缩下体积比 JPEG 小很多，清晰度几乎无差别，还支持透明和动画，现代浏览器都能兼容。
-
极致小体积选 AVIF 比 WebP 体积更小，清晰度更高，适合高清大图或对加载速度要求极高的场景，但要注意部分老浏览器不支持。
-
兼容性优先选 JPEG/PNG 如果需要兼容老旧浏览器（如 IE），照片用 JPEG，透明图标用 PNG。
-
简单动图选 GIF/ WebP 动图 GIF 兼容性最好但色彩差、体积偏大；WebP 动图体积更小、画质更好。
