常见图片格式以及使用场景
1. 栅格（位图）图片格式
| 格式 | 简介 | 优点 | 缺点 | 典型场景 | 兼容性 |
|---|---|---|---|---|---|
| JPEG/JPG | 有损压缩，色彩丰富，体积小 | 文件小，加载快，广泛支持 | 有损压缩，透明度不支持 | 照片、产品图 | 全面 |
| PNG | 无损压缩，支持透明 | 透明、无损、色彩丰富 | 文件大于JPEG | 图标、Logo、截图 | 全面 |
| GIF | 8位色，支持简单动画 | 动画、广泛兼容 | 仅256色，画质差 | 简单动画、表情包 | 全面 |
| APNG | PNG的动画扩展 | 动画、透明、色彩丰富 | 兼容性略低于GIF | 高质量动画 | 主流浏览器 |
| WebP | Google开发，支持有损/无损/动画/透明 | 体积小，功能全 | 旧浏览器需降级 | 网站图片优化 | 主流浏览器 |
| AVIF | 基于AV1，支持HDR、动画、透明 | 压缩率高，画质优 | 兼容性略低，解码慢 | 高质量图片、动画 | 新版主流浏览器 |
| ICO | Windows图标专用 | 多尺寸，适合favicon | 仅用于图标 | 网站favicon | 全面 |
2. 矢量图片格式
| 格式 | 简介 | 优点 | 缺点 | 典型场景 | 兼容性 |
|---|---|---|---|---|---|
| SVG | XML描述的矢量图 | 无限缩放，体积小，可交互 | 不适合复杂照片 | Logo、图标、图表 | 全面 |
3. 使用场景
- 照片/实景图：优先
WebP、AVIF，兼容性要求高时用JPEG - 透明图/Logo/图标：优先
SVG（矢量），或PNG（位图），动画用APNG/WebP - 动画：
WebP、APNG，兼容性极高时用GIF - favicon：
ICO（多尺寸），也可用PNG
4. 兼容性与降级
新格式如WebP、AVIF应通过<picture>标签提供多格式降级，保证所有用户可见。
html
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="图片描述">
</picture>