网页图片格式完整指南 — PNG、JPEG、WebP、AVIF
网页图片格式完整指南
选择正确的图片格式是你能为网站性能做出的最简单却影响最大的决定之一。每种格式在文件大小、视觉质量、功能支持和浏览器兼容性之间有不同的权衡。本指南详细剖析四种主要的网页图片格式，帮助你为发布的每一张图片做出明智的选择。
JPEG：通用主力
JPEG 是 Joint Photographic Experts Group 的缩写，三十多年来一直是主流的网页图片格式。它使用有损压缩，通过丢弃人眼难以察觉的色彩信息来获得较小的文件大小。
优势：
- 在每一台设备、每一个浏览器上都获得普遍支持。
- 对具有平滑色彩渐变的照片内容具有出色的压缩效果。
- 质量从 0 到 100 可调，对文件大小提供精细的控制。
- 几乎所有设备都支持硬件解码加速。
劣势：
- 不支持透明度。JPEG 无法渲染带透明背景的图片。
- 在低质量设置下有损压缩会引入可见伪影，尤其是边缘周围的块状效应和渐变中的条带效应。
- 对具有锐利文字、纯色或硬边缘的图片表现不佳。
最佳使用场景： 照片、颜色丰富的复杂插画、产品图片、首屏横幅（hero banner），以及任何需要通用兼容性的图片。
PNG：精准与透明
PNG（Portable Network Graphics，便携式网络图形）是作为 GIF 的免费开放替代品而创建的。它使用无损压缩，意味着每个像素都精确重现原始图片中的样子。
优势：
- 无损压缩保证零画质损失，即使反复保存也是如此。
- 完整的 alpha 透明度支持，可实现平滑边缘和透明背景。
- 对具有大面积均匀颜色的图片（如截图和扁平图形）具有出色的压缩效果。
- 支持 24 位色彩（1670 万色）和 8 位索引色彩（256 色），后者文件更小。
劣势：
- 对照片内容而言，文件大小明显大于 JPEG——通常大 2 到 5 倍。
- 不支持原生动画。对于动画内容，请改用 GIF 或 WebP。
- 相机和手机照片保存为 PNG 会浪费大量带宽。
最佳使用场景： 徽标、图标、截图、UI 设计稿、包含文字的图片、需要透明度的图形，以及任何要求逐像素完美再现的场景。
WebP：现代全能选手
WebP 是由 Google 开发的现代图片格式。它旨在用单一格式取代 JPEG、PNG 和 GIF，更高效地处理所有主要使用场景。
优势：
- 在单一格式中同时支持有损和无损压缩。
- 在同等视觉质量下，有损 WebP 通常比 JPEG 小 25% 到 35%。
- 无损 WebP 比 PNG 小 20% 到 25%。
- 在有损和无损模式下均支持 alpha 透明度。
- 支持动画，是 GIF 的直接替代品，且文件小得多。
- 广泛的浏览器支持：Chrome、Firefox、Edge 以及 Safari 14 及更高版本。
劣势：
- 较旧的浏览器（包括 Internet Explorer 以及 Safari 13 及更早版本）不支持 WebP。
- 编码速度比 JPEG 慢，不过解码速度相当。
- 并非所有图片编辑工具都原生支持 WebP。
最佳使用场景： 以文件大小为优先的网页图片、现代 Web 应用、用单一格式取代 JPEG 和 PNG（在支持它的浏览器中）。
AVIF：下一代格式
AVIF（AV1 图片文件格式）是最新加入的格式，基于 AV1 视频编解码器构建。它提供了任何广泛支持的图片格式中最佳的压缩效率。
优势：
- 在相同视觉质量下，比 JPEG 小最多 50%。
- 比 WebP 小最多 30%。
- 支持有损和无损压缩。
- 完整的透明度和 HDR 支持，具备宽广色域。
- 免版税开放标准。
劣势：
- 浏览器支持仍在增长。Chrome 和 Firefox 支持 AVIF；Safari 在版本 16 中加入了支持。
- 编码计算成本高，压缩速度比 JPEG 或 WebP 慢。
- 在图片编辑和设计工具中的支持有限。
- 在没有专用硬件的情况下，不适合实时或高吞吐量编码场景。
最佳使用场景： 面向现代浏览器的前沿 Web 项目、需要最大压缩率的场景、HDR 内容，以及编码时间可接受的大规模图片交付。
并排格式对比
| 特性 | JPEG | PNG | WebP | AVIF | |---------|------|-----|------|------| | 压缩类型 | 有损 | 无损 | 有损和无损 | 有损和无损 | | 透明度 | 不支持 | 支持（alpha） | 支持（alpha） | 支持（alpha） | | 动画 | 不支持 | 不支持 | 支持 | 支持 | | HDR 支持 | 不支持 | 不支持 | 不支持 | 支持 | | 24 位色彩 | 支持 | 支持 | 支持 | 支持 | | 相对文件大小 | 基准 | 为 JPEG 的 200-500% | 为 JPEG 的 65-80% | 为 JPEG 的 50-70% | | 浏览器支持 | 普遍 | 普遍 | 95%+ 用户 | 85%+ 用户 | | 编码速度 | 快 | 中等 | 中等 | 慢 |
如何选择格式
为你发布的每一张图片遵循以下决策树：
- 是不需要透明度的照片吗？使用 JPEG 或 AVIF 获得最大压缩率。
- 需要透明度，或包含文字和锐利边缘吗？使用 PNG 获得普遍支持，或使用 WebP 适配现代浏览器。
- 需要动画吗？使用 WebP 替代 GIF，文件明显更小。
- 目标是绝对最大压缩率吗？如果你的受众使用现代浏览器，请使用 AVIF。
以原始格式压缩图片
一旦你为使用场景选择了正确的格式，就在不转换为其他格式的前提下优化文件大小。我们的免费在线图片压缩工具支持 PNG、JPEG、WebP 和 AVIF——上传你的图片，下载保持原始格式的压缩版本。没有破坏画质的转换链，没有多余的步骤。