图片格式速查表
图片格式速查：PNG/JPEG/WebP/AVIF/GIF/SVG/ICO/HEIC 的扩展名、MIME、压缩方式、透明与动画支持及最佳用途，选格式或做网站图片优化时快速查阅。
原理解析
图像格式分两大类：栅格（像素矩阵，如 PNG/JPEG/WebP）与矢量（几何指令，如 SVG）。栅格放大必糊，矢量可无限缩放仍清晰，适合图标与 Logo。
有损（JPEG/有损 WebP）体积更小但丢弃细节，无损（PNG/无损 WebP）保留全部像素、适合截图与线条图。透明靠 alpha 通道（PNG/WebP/AVIF 支持）。现代 WebP/AVIF 在相近画质下比老格式小很多，是性能优化首选。
什么时候该查这张表
这张表在你要为网页选图片格式时有用。它把 JPEG、PNG、GIF、WebP、AVIF、BMP、ICO、SVG 等格式按扩展名与 MIME、压缩方式、透明支持、动画支持、最佳用途并列，方便对比取舍。
不该查的情况：你在做图片处理管线的调优（质量参数、色彩空间、响应式裁剪、服务端转换）。格式选择只是第一步，正确的做法是上传时按目标尺寸多档转码、配合 srcset 与 sizes 响应式加载，而不是让浏览器拿一张原图去适配所有场景。
判断标准：先看是否需要透明或动画。需要动画 ⇒ GIF/WebP/AVIF（且 WebP/AVIF 体积更小）；需要透明 ⇒ PNG/WebP/AVIF（GIF 只支持 1bit 透明）；都不需要 ⇒ JPEG 或 WebP，二者在照片场景体积接近。
特别注意 SVG 与位图的分工：SVG 是矢量格式，适合图标与插画，但不适合位图照片（嵌入 base64 的照片会让体积暴涨）。而品牌 logo 用 PNG 会在高分屏上模糊。判断依据是「内容是几何图形还是像素」而非「文件大小」。
边界与常见陷阱
AVIF 与 WebP 的兼容性仍在演进，老浏览器会静默降级
现代浏览器都支持这两者，但 Safari 16 之前完全不支持 AVIF，部分环境 WebP 也缺。若页面只用 AVIF/WebP，老浏览器会看到什么都不显示（不报错，只是空位）。安全做法是提供 「<picture>」 多源回退：AVIF → WebP → JPEG/PNG 依次兜底。同时注意服务端若没配 「Accept」 头协商，会对所有用户发同一种格式，白白浪费新格式的体积优势。
未压缩或误用压缩的 PNG 体积可能超过 JPEG 十倍
照片类内容存 PNG 是常见错误：PNG 用无损压缩，照片压缩比很低，一张 1920×1080 照片的 PNG 常有几 MB，而 JPEG 只需几百 KB。判据是「有没有连续的色调渐变」——有（照片、插画）用 JPEG/WebP/AVIF，无（图标、文字、截图、需透明）才用 PNG。上传时按实际显示尺寸压缩（不要把 4000px 原图直接塞进页面），收益通常比换格式更大。
动图的体积与解码开销常被低估
一个 3 秒的 GIF 在 800×600 下常有几 MB，且 GIF 每帧独立压缩，解码时 CPU 占用高，在低端机上会明显卡顿。现代替代方案：WebP 动图体积通常只有 GIF 的 1/3，AVIF 更小，且可用 <img loading="lazy"> 与 CSS 控制播放。另外「用视频替代动图」（<video> 加 autoplay muted playsinline）在时长较长时体积与性能都更好。
与相邻内容的分工
要处理具体的图片文件（压缩、裁剪、格式转换、批量处理），用站内图片相关工具；本页是格式选型对照。
要调整页面上的图片展示行为（懒加载、响应式尺寸、占位图），属前端性能优化范畴，本表不覆盖。
要评估视觉质量与无障碍（如 alt 文本），属内容规范范畴；格式选择不影响可访问性。
若目的是排查某个图片没显示的问题，先看响应式与路径是否正确——格式与 MIME 不匹配也会导致浏览器拒绝渲染。
实战片段
要点：① 新格式必须配 picture 多源回退，否则 Safari 16 以下会什么都不显示且不报错；② 照片别存 PNG，未压缩 PNG 可能比 JPEG 大十倍，判据是「有没有连续色调渐变」；③ 上传时按实际显示尺寸多档转码配 srcset/sizes，收益通常大于换格式本身；④ 长动效用 video 替代 GIF 或动图，体积与解码开销都更低；⑤ 服务端要按 Accept 头协商格式，否则对所有用户发同一种，白白浪费新格式优势。
<!-- ① 多源回退：新格式在前，老浏览器自动落到后面 -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="描述性替代文本" width="1200" height="630" loading="lazy">
</picture>
<!-- ② 按断点给不同尺寸（避免让手机下载 2000px 原图） -->
<img src="card-400.jpg"
srcset="card-400.jpg 400w, card-800.jpg 800w, card-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 400px"
width="1200" height="800" loading="lazy" decoding="async" alt="卡片插图">
<!-- ③ 格式选择速查 -->
<!-- 照片/渐变 → JPEG（兼容最好）或 WebP/AVIF（更小） -->
<!-- 图标/截图 → PNG（需透明）或 SVG（矢量、任意缩放） -->
<!-- 简单动图 → WebP 动图（约为 GIF 的 1/3） -->
<!-- 长动效/视频 → <video autoplay muted playsinline loop> -->
<!-- ④ SVG 用 currentColor 跟随主题色，避免为两种主题各存一份 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="9"></circle>
</svg>
<!-- ⑤ 🔴 常见错误：把照片存成 PNG（体积差十倍） -->
<!-- ❌ <img src="photo.png"> 1920×1080 可能 3–5 MB -->
<!-- ✅ <img src="photo.webp"> 同图约 200–400 KB -->
<!-- ⑥ 长动图改用视频，体积与解码都更省 -->
<video src="demo.webm" autoplay muted loop playsinline width="640" height="360"></video>实践注解
- PNG 的无损不等于更小，照片场景通常更大PNG 对连续色调照片的压缩率远低于 JPEG/WebP，同一张照片存 PNG 可能大 5–10 倍。选型应看内容：图形、截图、需要透明时选 PNG/WebP，摄影内容选 JPEG/WebP/AVIF。
- 有损压缩的元数据与色彩配置会一起被处理带 ICC 配置的图片经有损压缩后若工具丢弃 ICC，颜色会在不同显示器上偏移；EXIF 中的方向标记（Orientation）被剥掉则照片会横竖颠倒。压缩流水线要显式决定这些字段的去留。
- AVIF/WebP 的兼容与解码成本要分开评估AVIF 压缩率更好但解码更慢、老设备支持差；正确做法是用 <picture> 提供多种格式并按能力回退，而不是全站只上一种新格式。
数据来源
- W3C PNG (ISO/IEC 15948)
- ITU-T T.81 (JPEG)
- Google WebP container specification
- ISO/IEC 23008-12 (HEIF / AVIF)
上述编号、名称与定义均来自公开规范，本站不主张对规范数据本身的独创性；本页的编排方式、中文释义与实践注解由本站撰写。
| 格式 | 扩展名 / 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。