图片格式速查表
图片格式速查：PNG/JPEG/WebP/AVIF/GIF/SVG/ICO/HEIC 的扩展名、MIME、压缩方式、透明与动画支持及最佳用途，选格式或做网站图片优化时快速查阅。
| 格式 | 扩展名 / MIME | 压缩 | 透明 | 动画 | 最佳用途 |
|---|---|---|---|---|---|
| PNG | .png · image/png | 无损 | 支持 | 不支持 | 图标、截图、需透明或文字清晰的图 |
| JPEG | .jpg/.jpeg · image/jpeg | 有损 | 不支持 | 不支持 | 照片等色彩丰富的图（体积更小） |
| WebP | .webp · image/webp | 有损 + 无损 | 支持 | 不支持 | 网页图片，替代 PNG/JPEG 省流量 |
| AVIF | .avif · image/avif | 有损 + 无损 | 支持 | 不支持 | 下一代网页图，压缩率高于 WebP |
| GIF | .gif · image/gif | 无损(调色板) | 1-bit 透明 | 支持 | 简单动画、表情包 |
| APNG | .apng · image/apng | 无损 | 支持 | 支持 | 高质量动画，替代 GIF |
| BMP | .bmp · image/bmp | 无压缩 | 不支持 | 不支持 | Windows 位图、无损原图 |
| TIFF | .tif/.tiff · image/tiff | 无损 | 支持 | 不支持 | 印刷、专业摄影归档 |
| ICO | .ico · image/x-icon | 无损 | 支持 | 不支持 | 网站 favicon（多尺寸） |
| SVG | .svg · image/svg+xml | 矢量 | 支持 | 支持 (CSS/SMIL) | 图标、Logo、可缩放插画 |
| HEIC | .heic · image/heic | 有损 | 支持 | 不支持 | iPhone 照片（高效压缩） |
| JPEG XL | .jxl · image/jxl | 有损 + 无损 | 支持 | 支持 | 实验性下一代格式 |
常见问题
PNG 和 JPEG 该选哪个？
需要透明背景、或图形/文字/线条这类边缘清晰的内容用 PNG（无损、不糊）；照片等色彩丰富且不需要透明的内容用 JPEG，体积更小。简单判断：图标、截图选 PNG，照片选 JPEG。
WebP 和 AVIF 有什么区别？
二者都同时支持有损与无损、都支持透明。AVIF 压缩率更高、画质更好，但编码更慢、旧浏览器兼容性略逊；WebP 兼容性更广、编解码更快。新项目优先用 WebP / AVIF 替代传统的 JPEG 与 PNG。
透明背景该用什么格式？
PNG、WebP、AVIF、GIF（仅 1-bit）、SVG 都支持透明；JPEG 不支持透明，转换时会用白底填充。做 Logo、贴纸、带透明通道的素材首选 PNG 或 WebP。
什么时候应该用 SVG？
图标、Logo、插画等矢量图形用 SVG：任意缩放都不糊、文件体积小、还能用 CSS 改色和做动画。照片这类位图不适合 SVG，位图该用 PNG/JPEG/WebP。