Web 常用的图片格式选择

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 图、动图

核心选择建议（清晰 + 小体积）

1. 优先选 WebP 它是目前平衡清晰度和体积的最佳选择，有损压缩下体积比 JPEG 小很多，清晰度几乎无差别，还支持透明和动画，现代浏览器都能兼容。
2. 极致小体积选 AVIF 比 WebP 体积更小，清晰度更高，适合高清大图或对加载速度要求极高的场景，但要注意部分老浏览器不支持。
3. 兼容性优先选 JPEG/PNG 如果需要兼容老旧浏览器（如 IE），照片用 JPEG，透明图标用 PNG。
4. 简单动图选 GIF/ WebP 动图 GIF 兼容性最好但色彩差、体积偏大；WebP 动图体积更小、画质更好。