图像格式对比 - JPEG/PNG/WebP/AVIF/GIF/BMP 的特性与适用场景
为什么图像格式选择很重要 - 对 Web 性能的影响
图像格式的选择直接影响文件大小、加载速度和视觉质量。错误的格式选择可能导致文件体积增大数倍，严重拖慢页面加载。
格式选择的影响：
- 文件大小：同一张照片，PNG 可能 5MB,JPEG 500KB,WebP 350KB,AVIF 250KB。差距可达 20 倍
- 加载速度：文件越小，下载越快。在 3G 网络下，1MB 的差异意味着数秒的加载时间差
- 视觉质量：有损压缩格式在高压缩率下会产生可见伪影。不同格式的伪影特征不同
- 功能支持：透明度、动画、HDR、渐进式加载等功能并非所有格式都支持
选择原则：没有万能的最佳格式。根据图像内容(照片/图形/图标)、功能需求(透明/动画)和目标平台(浏览器兼容性)综合判断。
把重要性落到具体数据上：根据 HTTP Archive 的统计，图像约占 Web 页面总传输量的 50%。这会直接影响 Google Core Web Vitals 中的 LCP（Largest Contentful Paint）得分，也关系到搜索排名，是不可忽视的要素。在实时处理场景中还要关注渐进式显示，也就是能否在低速线路上分阶段呈现。截至 2026 年，Web 上使用的主要格式为 JPEG、PNG、WebP、AVIF、GIF、BMP 共 6 种。
JPEG 和 PNG - 传统格式的特性与局限
JPEG 和 PNG 是 Web 上使用最广泛的两种格式，各有明确的适用领域。理解它们的特性是选择新格式的基础。
JPEG:
- 压缩方式：有损压缩，基于 DCT(离散余弦变换)。丢弃人眼不敏感的高频信息
- 适用内容：照片、复杂渐变、自然图像。色彩丰富、细节复杂的内容
- 不适用：文字、线条图、图标(锐利边缘会产生振铃伪影)、需要透明度的图像
- 质量参数:1-100，推荐 75-85 为 Web 使用的最佳平衡点
PNG:
- 压缩方式：无损压缩，基于 DEFLATE 算法。完美保留所有像素信息
- 适用内容：图标、Logo、截图、文字图像、需要透明度的图像
- 不适用：照片(文件过大，通常是 JPEG 的 5-10 倍)
- 色深：支持 8 位(256 色)和 24/32 位(真彩色 + Alpha 通道)
两者的共同局限：压缩效率不如新一代格式。JPEG 在低质量下伪影明显，PNG 对照片压缩率极低。
两种传统格式的规格可以逐条对齐：JPEG（Joint Photographic Experts Group）是 1992 年标准化的有损压缩格式，色深为 24 位（约 1677 万色），不支持背景透明，也不支持动画，压缩方式是基于 DCT（离散余弦变换）的有损压缩，支持渐进式显示（Progressive JPEG），擅长照片、自然图像、渐变与肤色再现，不擅长文字、线条画、边缘锐利的图像（会产生块噪声）与透明图像，最大尺寸为 65,535 × 65,535 px（实质上无限制）。PNG（Portable Network Graphics）是 1996 年作为 GIF 的替代方案制定的无损压缩格式，色深最高 48 位（RGB）加 16 位 Alpha，PNG-8 为 256 色调色板，透明支持完整（8 位 Alpha 通道提供 256 级半透明），动画以 APNG 的形式支持（主要浏览器已支持），压缩方式是基于 Deflate 的无损压缩（过滤 + LZ77 + 哈夫曼编码），渐进式显示支持 Interlaced PNG（Adam7 算法），擅长文字、标志、图标、截图、透明图像与图表，不擅长照片（文件大小会达到 JPEG 的 3-5 倍）。
WebP 和 AVIF - 新一代格式的能力与选择
WebP 和 AVIF 是取代 JPEG/PNG 的新一代格式，在相同质量下体积显著更小。两者各有优势。
WebP:
- 开发者:Google,2010 年发布
- 压缩效率：有损模式比 JPEG 小 25-35%，无损模式比 PNG 小 26%
- 功能：支持有损/无损、透明度(Alpha)、动画
- 兼容性：所有现代浏览器支持(Chrome、Firefox、Safari 14+、Edge。WebP 动画需 Safari 16+)
- 编解码速度：编码和解码都很快，适合实时转换
AVIF:
- 基础：基于 AV1 视频编解码器，2019 年发布
- 压缩效率：比 JPEG 小 50%，比 WebP 小 20%。目前压缩效率最高的格式
- 功能：支持 HDR、宽色域(BT.2020)、10/12 位色深、透明度、动画
- 兼容性:Chrome 85+、Firefox 93+、Safari 16.1+。覆盖率约 92%
- 缺点：编码速度慢(比 WebP 慢 10-100 倍)，不适合实时转换
选择建议：优先 AVIF(质量最高),WebP 作为降级方案，JPEG 作为最终降级。使用 <picture> 元素按顺序提供。
新一代格式的参数同样可以对齐：WebP 色深为 24 位（有损）与 32 位（无损、带 Alpha），支持透明（有损模式下也能保留 Alpha 通道），支持动画（作为 GIF 的替代很出色），压缩效率相比 JPEG 减小 25-35%，相比 PNG 减小 26%，Chrome、Firefox、Safari、Edge 全部支持（97% 以上），最大尺寸为 16,383 × 16,383 px，编码速度与 JPEG 相当，解码也很快。AVIF（AV1 Image File Format）是 2019 年制定的最新格式，把视频编解码器 AV1 的技术应用到静止图像，比 WebP 再小 20-30%，浏览器支持为 Chrome 85+、Firefox 93+、Safari 16.4+，支持率约 92%，最大尺寸为 65,536 × 65,536 px；弱点是编码速度慢（约为 WebP 的 5-10 倍时间），在 CDN 上做动态转换会产生 CPU 时间成本，因此推荐事先生成。
GIF 和 BMP - 遗留格式与替代方案
GIF 和 BMP 是早期的图像格式，在现代 Web 开发中应尽量避免使用，但了解它们有助于处理遗留内容。
GIF:
- 特点：最多 256 色，支持简单动画和 1 位透明度
- 历史地位：曾是 Web 上唯一的动画图像格式，"GIF" 成为短动画的代名词
- 问题:256 色限制导致照片质量极差，动画文件体积巨大(无帧间压缩)
- 替代方案：静态图 → PNG/WebP；动画 → WebP 动画(体积 1/3-1/5)或 MP4 视频(体积 1/10)
BMP:
- 特点：无压缩(或简单 RLE 压缩)，文件体积极大
- 用途：仅在 Windows 系统内部使用，Web 上完全不应使用
- 替代方案：任何其他格式都优于 BMP
迁移建议：遇到 GIF/BMP 格式的图像时，应转换为现代格式。GIF 动画转 WebP 动画或 MP4，静态 GIF 转 PNG 或 WebP。
遗留格式的来历与替代路径可以写清楚：GIF（Graphics Interchange Format）是 1987 年由 CompuServe 开发的老格式，但凭借动画功能至今仍被广泛使用。SNS 与消息应用中的「GIF」已经成为一种文化符号，技术上却有诸多限制：每一帧可以使用不同的调色板，压缩方式为 LZW 无损压缩，当前用途集中在短动画、反应图、迷因与加载指示器，问题在于 256 色限制导致的色带（颜色台阶），以及文件体积偏大（约为同等质量 WebP 动画的 3-5 倍）。动画用途推荐改用 WebP 动画、AVIF 动画，或者替换为短视频（MP4 H.264 / WebM VP9）。BMP（Bitmap）是 Microsoft 为 Windows 开发的无压缩格式，1,920 × 1,080 px 的图像约为 6MB，并不实用。
各格式压缩效率基准测试
通过标准化测试对比各格式在不同内容类型上的压缩效率，用数据支撑格式选择决策。
测试条件：相同视觉质量(SSIM ≥ 0.95)下的文件大小对比。
照片类内容(以 JPEG quality=85 为基准 100%):
- JPEG(q85):100%(基准)
- WebP(有损):65-75%(小 25-35%)
- AVIF(有损):45-55%(小 45-55%)
- PNG(无损):400-600%(大 4-6 倍)
图形/图标类内容(以 PNG 为基准 100%):
- PNG:100%(基准)
- WebP(无损):70-80%(小 20-30%)
- AVIF(无损):60-75%(小 25-40%)
- JPEG：不适用(有损且不支持透明)
关键发现：
- AVIF 在所有内容类型上压缩效率最高，但编码速度最慢
- WebP 是性能和兼容性的最佳平衡点
- JPEG 在高质量设置(q90+)下与 WebP 差距缩小
- PNG 仅在需要无损+透明时才是合理选择
基准测试的具体数字可以完整列出：测试图像为 1,920 × 1,080 px 的照片（自然风景）与同尺寸的截图（文字加 UI 元素）共 2 种。照片（自然风景，原图 BMP：5.93MB）的结果是，JPEG 品质 85 为 312KB（SSIM：0.971），WebP 品质 80 为 228KB（SSIM：0.972），AVIF 品质 60 为 156KB（SSIM：0.970），PNG 为 4,210KB（SSIM：1.000，无损）。截图（文字加 UI，原图 BMP：5.93MB）的结果是，JPEG 品质 85 为 487KB（文字周边有噪声），WebP 无损为 1,120KB（SSIM：1.000），PNG 为 1,580KB（SSIM：1.000），PNG-8（256 色）为 380KB（色数较少的 UI 已经足够）。由此可以读出几点：照片上 AVIF 的效率压倒性地高，用 JPEG 一半的体积就实现了同等质量；WebP 比 JPEG 小 27%，编码速度也更快；JPEG 在文字周边的噪声是问题；色数较少的 UI 图像上 PNG-8 效率最高。基准结果会随图像内容大幅波动。
按用途选择最佳格式指南 - 附实现模式
根据具体使用场景选择最佳格式，并提供对应的实现代码模式。
场景决策表：
- 网站照片:AVIF → WebP → JPEG。使用
<picture>多格式降级 - 透明图标/Logo:SVG(矢量)> WebP(光栅)> PNG。优先矢量格式
- 产品图片:WebP/AVIF(有损，q80-85)。需要高质量但不必无损
- 截图/文档图:WebP(无损)> PNG。文字和线条需要无损保留
- 动画/短视频:MP4 > WebP 动画 > GIF。视频格式效率远超图像动画
- 缩略图:WebP(有损，q70)。小尺寸下质量差异不明显，优先体积
HTML 实现模式：
<picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="描述"></picture>
服务端 Content Negotiation：检查 Accept: image/avif, image/webp 头，返回浏览器支持的最优格式。CDN 层面自动处理最为高效。
按用途的选择指南与实现模式可以逐条给出：照片与自然图像走 AVIF（面向支持的浏览器）→ WebP（回退）→ JPEG（最终回退）；文字、标志与图标走 SVG（矢量）→ PNG-8（256 色以下）→ WebP 无损 → PNG-24；需要透明的图像走 WebP（有损加 Alpha）→ PNG-24/32 → AVIF；动画走 WebP 动画 → MP4/WebM 视频 → AVIF 序列 → GIF（兼容遗留环境）；印刷用高质量图像走 TIFF（无压缩或者 LZW）→ PNG-24 → JPEG（品质 95% 以上）；邮件附件走 JPEG（兼容性最高）→ PNG（需要透明时）。利用 HTML 的 <picture> 元素，就能按浏览器的支持情况自动选择最合适的格式：<picture><source srcset="image.avif" type="image/avif"><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="说明" loading="lazy" decoding="async"></picture>。这样写就能向支持 AVIF 的浏览器分发 AVIF，向支持 WebP 的浏览器分发 WebP，其余则分发 JPEG。用构建工具（Sharp、ImageMagick、squoosh-cli）搭建自动生成多种格式的流水线，可以让运维更高效。Next.js、Nuxt.js、Gatsby 等框架内置了图像优化功能，只要做好配置就能自动分发最优格式。