图像格式对比表（PNG/JPG/WebP/AVIF/GIF）
整理了 Web 与应用开发中常用图像格式的特点对比，便于按用途选择最合适的格式。
图像格式对比一览
下表比较了主要图像格式的压缩方式、透明（Alpha 通道）支持、动画支持与浏览器兼容性。
| 格式 | 压缩方式 | 透明 | 动画 | 色深 | 浏览器支持 |
|---|---|---|---|---|---|
| PNG | 无损压缩 | 支持（8bit Alpha） | APNG（有限支持） | 最高 48bit + 16bit Alpha | 所有浏览器 |
| JPEG | 有损压缩 | 不支持 | 不支持 | 24bit（约 1677 万色） | 所有浏览器 |
| WebP | 无损 / 有损 | 支持（8bit Alpha） | 支持 | 24bit + 8bit Alpha | 主流浏览器支持（不支持 IE） |
| AVIF | 无损 / 有损 | 支持（8/10/12bit Alpha） | 支持（AVIF Sequence） | 最高 12bit HDR | Chrome/Firefox/Safari 16.4+ |
| GIF | 无损压缩（LZW） | 1bit（仅全透明或不透明） | 支持 | 8bit（256 色） | 所有浏览器 |
文件大小比较
同一张图片保存为不同格式时的文件大小参考。实际大小会因图像内容和压缩设置而有很大差异。
| 格式 | 照片（相对大小） | 插画（相对大小） | 截图（相对大小） |
|---|---|---|---|
| PNG | 大 | 中 | 中 |
| JPEG（质量 80） | 小 | 中～大 | 中 |
| WebP（质量 80） | 极小 | 小 | 小 |
| AVIF（质量 60） | 极小 | 极小 | 极小 |
| GIF | 不推荐 | 大（受限于 256 色） | 大 |
各格式详解与适用场景
PNG（Portable Network Graphics）
采用无损压缩，画质不会劣化，并支持 Alpha 通道透明。适合 Logo、图标、截图以及含文字的图像等需要清晰边缘的场景；但用于照片类自然图像时文件往往偏大。
- 最佳用途：Logo、图标、截图以及需要透明的图像
- 不适合：照片（文件会变得不必要地大）
JPEG（Joint Photographic Experts Group）
有损压缩可高效处理照片和渐变较多的图像。质量参数（0～100）用于在体积与画质之间取舍。不支持透明与动画，但可保留 Exif 信息（拍摄时间、相机型号等）。
- 最佳用途：照片、自然图像、渐变
- 不适合：文字图像、Logo（压缩伪影明显）以及需要透明的图像
WebP
由 Google 开发，相比 JPEG 可减小约 25～34%，相比 PNG 约减小 26%。同时支持无损与有损模式，并支持 Alpha 通道和动画。除 IE 外的主流浏览器均已支持。
- 最佳用途：网站通用（照片与插画皆可）
- 不适合：需兼容 IE 的场景、印刷用途
AVIF（AV1 Image File Format）
基于 AV1 视频编解码器的新一代图像格式。压缩效率高于 WebP，并支持 HDR。编码速度偏慢，但画质与文件大小的平衡最为出色。
- 最佳用途：对体积要求高的网站、HDR 图像
- 不适合：需支持旧浏览器、需要实时编码的场景
GIF（Graphics Interchange Format）
仅支持 256 色，但作为支持动画的老牌格式沿用至今。如今正逐步被视频以及 WebP/AVIF 动画取代，但凭借极高的兼容性，仍广泛用于社交网络和聊天应用中的短动画。
- 最佳用途：短动画、需兼容老旧系统
- 不适合：照片及需要高画质的图像（受 256 色限制）
Web 开发中的推荐做法
在现代网站中，最佳做法是通过 <picture> 元素提供多种格式并带回退方案。
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文">
</picture>这样书写后，支持 AVIF 的浏览器会显示 AVIF，支持 WebP 的显示 WebP，其余则回退为 JPEG。DevLab 提供各格式的测试用图像文件，可用于验证格式转换与体积对比。
❓ 常见问题
照片和截图的最佳格式一样吗？
不一样。照片中相邻像素的颜色连续变化，正适合 JPEG、WebP、AVIF 这类有损压缩。截图由整片同色区域和锐利的文字边缘构成，经有损压缩后文字周围会出现噪点。选择无损 PNG 或无损 WebP 既能保持观感，体积通常也更小。
同样的质量数值在不同格式下效果一样吗？
并不一样。质量数值只是编码器内部的旋钮，不能跨格式比较。JPEG 的 80、WebP 的 80 与 AVIF 的 80 施加的压缩量与劣化方式各不相同。迁移时不要照搬数字，请把真实图片并排对比，为每种格式分别确定可接受的下限。
需要透明时有哪些选择？
共四种：PNG、WebP、AVIF、GIF，JPEG 不在选项内。能承载 8 位 alpha 的是 PNG、WebP 与 AVIF；GIF 只有 1 位，非全透即不透，因此边缘会呈锯齿。图形素材默认用 PNG，若透明区域压在照片内容之上则用 WebP。