常见图像文件类型
在构建网站时，选择适当的图像格式至关重要。不同的格式在压缩、透明度、动画等方面有各自的特点。
以下是网络上最常见的图像文件格式：
1. APNG (动态可移植网络图形)
- MIME 类型: image/apng
- 文件扩展名: .apng
- 摘要: 无损动画序列的良好选择，特别适用于简单动画。支持浏览器：Chrome、Edge、Firefox、Opera、Safari。
2. AVIF (AV1 图像档案格式)
- MIME 类型: image/avif
- 文件扩展名: .avif
- 摘要: 高性能、无版税，是图像和动画图像的理想选择。比 PNG 或 JPEG 具有更好的压缩效果、色深和透明度。需要注意使用回退格式（<picture> 元素）。支持浏览器：Chrome、Firefox、Opera、Safari。
3. GIF (图像互换格式)
- MIME 类型: image/gif
- 文件扩展名: .gif
- 摘要: 适用于简单图像和动画，但性能相对较差。无损和有索引的静态图像首选 PNG，动画可考虑使用 WebP、AVIF 或 APNG。支持浏览器：Chrome、Edge、Firefox、IE、Opera、Safari。
4. JPEG (联合图像专家小组图像)
- MIME 类型: image/jpeg
- 文件扩展名: .jpg、.jpeg、.jfif、.pjpeg、.pjp
- 摘要: 有损压缩的理想选择，尤其适用于静态图像。PNG 更适合精确再现图像，而 WebP/AVIF 在更好的再现效果和更高压缩率方面更有优势。支持浏览器：Chrome、Edge、Firefox、IE、Opera、Safari。
5. PNG (便携式网络图形)
- MIME 类型: image/png
- 文件扩展名: .png
- 摘要: 相比 JPEG，能更精确再现源图像，透明度表现优秀。WebP/AVIF 提供更好的压缩和再现效果，但浏览器支持相对有限。支持浏览器：Chrome、Edge、Firefox、IE、Opera、Safari。
6. SVG (可缩放矢量图形)
- MIME 类型: image/svg+xml
- 文件扩展名: .svg
- 摘要: 矢量图像格式，适用于用户界面元素、图标和图表等，需精确绘制不同尺寸。支持浏览器：Chrome、Edge、Firefox、IE、Opera、Safari。
7. WebP (Web 图像格式)
- MIME 类型: image/webp
- 文件扩展名: .webp
- 摘要: 适用于静止图像和动画图像的绝佳选择。压缩效果比 PNG 或 JPEG 更好，支持更高的色深、动画帧和透明度。支持浏览器：Chrome、Edge、Firefox、Opera、Safari。
注意事项与浏览器支持
- 与较老的格式（PNG、JPEG、GIF）相比，新格式（WebP、AVIF）性能更好，但浏览器支持相对较少。选择时需考虑历史浏览器支持情况。
- Safari 11.1 新增了使用视频格式替代 GIF 动画的功能，其他浏览器尚未添加支持。详细信息可参考 Chromium bug 和 Firefox bug。
不推荐使用的图像格式
以下图像格式在 web 内容中应避免使用，因为它们要么没有广泛的浏览器支持，要么有更好的替代格式：
- BMP (位图文件): 支持浏览器：Chrome、Edge、Firefox、IE、Opera、Safari。
- ICO (Microsoft 图标): 支持浏览器：Chrome、Edge、Firefox、IE、Opera、Safari。
- TIFF (标签图像文件格式): 仅 Safari 支持。
选择适当的图像格式有助于提升网站性能和用户体验。记住在支持新格式的浏览器中利用其优势，同时为历史浏览器提供兼容性。
