聊一聊几种常用 Web 图片格式：GIF、JPG、PNG、WebP、AVIF

Category（分类）: Other Status: 未知

本文尽量保留原文对 GIF、JPG、PNG、WebP 和 AVIF 的介绍、示例图片与总结结构，并补充当前浏览器、HTML 响应式图片和图片优化的实践。

原文中的部分兼容性截图、文件大小和“比某格式小多少”的结论来自特定图片和较早浏览器版本，只能作为历史示例，不能当作今天所有图片的固定结论。

前言

在大多数 Web 页面中，图片往往占据传输字节数的很大比例。原文提到“图片占到了页面大小的 60%～70%”，这个比例并不是所有网站都成立，会受到页面类型、字体、视频、脚本和统计口径影响；但图片通常确实是页面性能优化的重要对象。实际项目应使用浏览器开发者工具、性能面板或 Lighthouse 统计，而不要依赖固定百分比。

在 Web 开发中，选择图片格式时要同时考虑：

• 图片内容：照片、插画、图标、截图还是动画；
• 是否需要透明、动画、HDR、宽色域或高位深；
• 目标尺寸和清晰度，而不是只看文件扩展名；
• 编码质量、解码成本和浏览器/客户端支持情况；
• 是否需要响应式尺寸、懒加载和 CDN 格式协商。

本文主要讨论 GIF、JPG（JPEG）、PNG、WebP 和 AVIF，也会补充 APNG、SVG、响应式图片等相关内容。

图片格式分类

按图像类型分类

光栅图（位图）

光栅图由像素组成，放大后可能出现锯齿或模糊。GIF、JPEG、PNG、WebP、AVIF 和 BMP 都属于光栅图格式。

矢量图

矢量图使用路径、形状和数学描述来绘制图像，适合图标、Logo、线稿和简单插画。SVG 是 Web 中常用的矢量格式，但不适合直接替代照片。

按压缩方式分类

• 无压缩：不对像素数据进行有效压缩，文件通常很大。BMP 的常见形式就是未压缩光栅图，因此一般不适合作为 Web 资源。
• 无损压缩：解码后可以逐像素恢复原始数据。PNG、GIF、WebP 无损模式和 APNG 都可以进行无损压缩。
• 有损压缩：通过量化、预测、变换或色度抽样等方式减小文件，解码结果不一定与原始像素完全相同。JPEG、WebP 有损模式和 AVIF 有损模式都属于这一类。

“有损”不等于“肉眼一定能看出差异”，“无损”也不等于“文件一定很小”。最终大小和画质还取决于原图内容、尺寸、编码器、质量参数和元数据。

GIF

GIF（Graphics Interchange Format）使用 LZW 算法对索引色图像进行无损压缩。每个像素通常是一个索引值，指向调色板中的颜色；每帧最多使用 256 个调色板颜色，因此色彩复杂、细节丰富的照片通常不适合保存为 GIF。

GIF 的特点：

• 支持单帧静态图片和多帧动画；
• 每帧使用索引色，最多 256 种调色板颜色，复杂图像常需要抖动；
• 支持简单透明，但通常是“某一个调色板颜色完全透明”，不是 PNG、WebP 或 AVIF 那样的连续 alpha 透明度；
• LZW 对调色板图像进行无损压缩，但将照片转换成 256 色后，颜色量化本身可能已经造成信息损失；
• 浏览器和历史软件支持非常广泛；
• 支持交错（interlacing），网络尚未完整下载时可以先显示较低质量的图像。

对于色彩简单的 Logo、线框图和少量颜色的短动画，GIF 仍然可用。但对于静态图标和 Logo，现代项目通常优先考虑 SVG 或 PNG；对于动画，APNG、Animated WebP、Animated AVIF 或视频往往能以更好的画质和体积完成同样的任务。

原文称 GIF 是“无损格式”，需要补充一个边界：LZW 压缩阶段是无损的，但把真彩色图片先量化为 256 色会损失颜色信息，所以“GIF 无损”不能理解为它能无损保存任意原始照片。

JPG / JPEG

JPG 通常指 JPEG（Joint Photographic Experts Group）图片，常用扩展名包括 .jpg 和 .jpeg。Web 上最常见的 JPEG 编码通常是有损压缩，适合照片、渐变和色彩丰富的静态图像。

原文称 JPG 是“基于直接色”，这个说法不是 JPEG 规范中常用的分类术语。更准确地说，JPEG 不使用 GIF 那种每个像素对应调色板索引的方式，而是对图像分量进行变换、量化和熵编码；常见编码还会使用 YCbCr 和色度抽样。

JPEG 的特点：

• 可以表达丰富的颜色和细节，特别适合照片；
• 有损压缩可以显著减小文件，但质量参数越低，块状、振铃、色带等伪影越明显；
• 常见 JPEG 不支持 alpha 透明和动画；
• 不适合需要锐利边缘、少量纯色、文字或透明背景的 Logo、图标和界面截图；
• 反复以有损质量重新导出会累积损失。应尽量从原始文件重新导出，而不是反复打开已经压缩过的 JPEG；
• 支持基线和渐进式（progressive）编码。渐进式 JPEG 可以在下载过程中逐步显示，但不同编码器和场景的实际收益需要测试；
• 文件可能带有 EXIF、ICC 色彩配置文件等元数据，发布前可根据业务需要清理，但要注意图片方向和色彩管理信息。

原文提到 JPG “可使用 1600 万种颜色”，这是按 8 位 RGB 三通道计算的理论组合数（约 2^24），不代表每张 JPEG 都能无损保存这些颜色，也不代表“人眼只能识别一万多种颜色”。JPEG 是否合适，应看图像内容和压缩结果，而不能仅根据理论颜色数量判断。

通常情况下：

• 照片、人物、风景和自然渐变：优先测试 JPEG、WebP 和 AVIF；
• 文字截图、UI 截图、锐利线条：优先测试 PNG、WebP 无损或 AVIF 无损/高质量模式；
• 透明背景：不要使用普通 JPEG，应选择 PNG、WebP、AVIF 或 SVG。

PNG-8

PNG（Portable Network Graphics）是无损压缩的光栅图格式。PNG-8 不是 PNG 规范中独立的文件格式名称，而是图像工具常用的简称，通常表示使用索引色、每个像素最多 8 位的 PNG。PNG 的色彩类型和位深还可以有多种组合，不能只通过文件名中的“8”判断全部特性。

PNG-8 的特点：

• 使用调色板和无损压缩，适合颜色数量较少的图像；
• 在许多简单图形上文件较小；
• 可以使用调色板透明度，透明表现通常比 GIF 灵活；
• 普通 PNG 是静态格式，PNG-8 本身不等于动画格式；
• 对照片和复杂渐变进行索引色量化后，可能出现抖动、色带或颜色损失。

原文认为 PNG-8 可以作为 GIF 的替代品，这在静态、无动画且颜色较少的图像上通常成立；如果需要动画，应考虑 APNG、Animated WebP、Animated AVIF 或视频，而不能直接把静态 PNG-8 当成 GIF 的完全替代品。

PNG-24

PNG-24 也主要是图像工具中的习惯叫法，通常指使用 8 位红、绿、蓝三个分量的真彩色 PNG（3 × 8 = 24 位，不包含 alpha）。如果还带有 8 位 alpha 通道，工具可能称为 PNG-32；这些名称不是 PNG 标准中唯一统一的分类方式。

PNG 实际上还支持灰度、索引色、真彩色、alpha 通道以及每个分量 16 位等形式。更准确的判断方式是查看 PNG 的色彩类型和位深，而不是只看“PNG-24”这个标签。

PNG-24/真彩色 PNG 的特点：

• 无损保存像素数据，适合需要精确复现的图像；
• 适合透明图、界面截图、文字、线稿、扁平插画和颜色边界清晰的图像；
• 可以表达丰富的颜色；
• 对照片通常比 JPEG 更大，因为 PNG 不利用 JPEG 那种针对照片的有损变换；
• PNG 的“品质高”是指无损或更精确，不意味着它在所有场景都比 JPEG 更清晰或更适合。

原文称 PNG-24 的文件大小“至少是 JPG 的 5 倍”，这个结论不能泛化：简单图形可能 PNG 很小，某些照片也可能经过优化后差距没有这么大。应在目标尺寸、目标画质和实际编码器下比较。

PNG 仍然是透明图片和需要无损保存的 Web 图片的重要选择，但照片不应因为“无损”两个字就默认使用 PNG。

WebP

WebP 是 Google 推出的现代 Web 图像格式，使用 RIFF 容器，可以承载有损或无损图像，并支持 alpha 透明和动画。

WebP 的特点：

• 支持有损压缩和无损压缩；
• 支持透明度和动画；
• 对许多照片和复杂图像，相比同等视觉质量的 JPEG 可能更小；
• 对许多透明或简单图像，相比 PNG 可能更小；
• 具体压缩比例取决于图像、编码器、质量参数和是否保留元数据，不能固定说一定比 JPEG、PNG 小 30%；
• 不支持传统意义上的渐进式显示，超大图片应结合尺寸控制和加载策略测试体验；
• 主流现代浏览器已经支持 WebP。原文“移动端整体还可以、浏览器支持度还不是很好”的兼容性截图属于历史资料，不能代表当前浏览器现状；旧浏览器、旧 WebView 和特殊客户端仍可能需要回退格式。

原文认为 WebP 理论上可以替代 PNG、JPG、GIF，这句话可以保留，但要补充实际边界：WebP 在功能上覆盖了很多常见需求，但项目仍需要考虑目标浏览器、解码性能、图片处理链、第三方软件兼容性和是否需要渐进式 JPEG 等特性。格式选择应以测试结果为准，而不是追求“所有图片都转成 WebP”。

原文的 PNG 与 WebP 对比工具仍可作为历史参考，但其中的样例、浏览器支持和编码器结果可能已经变化：

PNG VS WebP（历史对比工具）

AVIF

AVIF（AV1 Image File Format）是基于 AV1 编码、放在 HEIF/ISO Base Media File Format 容器中的开放图像格式，由开放媒体联盟（Alliance for Open Media，AOMedia）及其成员共同推动。Netflix 曾较早公开介绍和评估 AVIF，但不能简单说 AVIF 是 Netflix 单独开发或在 2020 年某一天才被创建的格式；AVIF 规范和生态是逐步形成的。

AVIF 的特点：

• 开放、免版税的图像格式；
• 支持有损和无损编码；
• 支持 alpha 透明、动画/多图像序列；
• 支持更高位深、HDR 和宽色域等能力；
• 在许多测试图像上能以小于 JPEG、PNG 或 WebP 的体积达到相近视觉质量，但结果依赖编码器和参数；
• 编码速度、解码速度、内存占用和硬件支持需要结合设备测试；
• AVIF 通常不提供 JPEG 那种渐进式显示能力，较大的图片需要关注首屏体验；
• 现代 Chrome、Firefox、Safari、Edge 和 Opera 已支持 AVIF，但不同浏览器版本对静态图、动画、HDR、色彩空间和特殊编码特性的支持可能不同，不能只根据“支持 AVIF”四个字判断所有能力。

AVIF 的优势是压缩效率和功能丰富，但它不一定在每一张图片、每一种质量目标或每一台设备上都优于 WebP。实际部署可以使用 AVIF 优先、WebP 次之、JPEG/PNG 兜底的策略，并通过真实图片样本和真实设备测量。

使用 <picture> 提供 AVIF、WebP 和 JPEG 回退

虽然部分客户端可能不支持 AVIF，但可以在原生 HTML 中使用 <picture> 提供渐进式格式选择。浏览器会按顺序选择自己支持的第一个 <source>，最后的 <img> 是回退内容：

<picture>
  <source srcset="img/photo.avif" type="image/avif">
  <source srcset="img/photo.webp" type="image/webp">
  <img src="img/photo.jpg" alt="照片描述" width="1200" height="800">
</picture>

这里不需要 JavaScript。type 应使用正确的 MIME 类型：

• AVIF：image/avif；
• WebP：image/webp；
• JPEG：image/jpeg；
• PNG：image/png；
• APNG：通常使用 image/apng，文件扩展名可能是 .apng 或 .png。

<picture> 只负责选择资源格式或媒体条件，仍然需要为每种格式生成相应文件。实际项目还应为不同屏幕宽度准备多个尺寸，使用 srcset 和 sizes，避免在手机上下载桌面端原图。

APNG、SVG 和动画图片的补充

APNG

APNG（Animated Portable Network Graphics）是在 PNG 基础上扩展出的动画格式。它支持比 GIF 更丰富的颜色深度和透明效果，适合进度指示器、简单 UI 动画和不需要音轨同步的短动画。

APNG 的优势是无损动画和 PNG 的透明能力；WebP、AVIF 在许多场景下可以得到更小的文件，但 APNG 的浏览器支持也已经比较广泛。对于复杂、较长、有音频或需要严格控制播放的动画，视频格式通常比 GIF/APNG 更合适。

SVG

SVG 是矢量格式，适合 Logo、图标、简单图表和需要在不同尺寸下保持清晰的界面元素。它不是照片格式，也不应把任意用户提供的 SVG 未经清洗就直接以内联方式插入页面；如果 SVG 来源不可信，需要考虑脚本、外部资源和事件处理带来的安全风险。

动画 GIF 与视频

GIF 适合短小、简单、需要极强兼容性的动画，但颜色只有索引色，文件可能很大。对于大尺寸或较长动画，可以评估 MP4、WebM 等视频格式；对于视频作为图片展示的场景，需要设置合适的封面、自动播放策略、循环和无障碍文本，并考虑移动端流量。

如何选择图片格式

上图是原文中的选择流程，里面的浏览器和格式名称具有历史局限。更实用的判断方式是：

1. 图标、Logo、线稿：优先 SVG；如果必须使用位图，测试 PNG、WebP 或 AVIF；
2. 照片和自然场景：测试 JPEG、WebP 和 AVIF，比较视觉质量、文件大小和解码时间；
3. 需要透明的静态图：测试 PNG、WebP 和 AVIF；简单图形也可以测试 PNG-8；
4. 少量颜色的静态索引图：PNG-8 往往比 GIF 更合适；
5. 简单短动画：测试 Animated WebP、APNG、Animated AVIF 和 GIF；
6. 长动画、带音频或复杂视频：优先评估视频格式；
7. 需要 HDR、宽色域或高位深：测试 AVIF，同时保留兼容性回退；
8. 无法控制客户端的旧系统、旧 WebView 或邮件环境：提供 JPEG/PNG/GIF 等兼容格式。

格式总结

Web 图片的实际优化

图片格式只是优化的一部分，图片尺寸和交付方式同样重要。

1. 先调整像素尺寸，再调整编码质量

如果页面只显示 800 CSS 像素宽的图片，就不应默认发送 5000 像素宽的原图。应根据布局宽度和设备像素比生成多个候选尺寸：

<img
  src="images/photo-800.webp"
  srcset="images/photo-400.webp 400w,
          images/photo-800.webp 800w,
          images/photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="图片描述"
  width="800"
  height="533"
  loading="lazy"
  decoding="async"
>

首屏最大的关键图片通常不应盲目使用 loading="lazy"；可以根据布局和性能测试决定是否提高优先级。非首屏图片可以懒加载，但应预先设置 width、height 或 CSS 宽高比，避免图片加载后造成布局偏移（CLS）。

2. 选择质量参数并进行视觉对比

“质量 80”在 JPEG、WebP 和 AVIF 中并不代表相同画质或相同压缩比例。应使用目标图片集比较：

• 文件字节数；
• 文字和边缘是否清晰；
• 暗部、天空、渐变区域是否出现色带；
• 透明边缘是否有白边或黑边；
• 手机和低端设备的解码时间、内存和耗电。

可以使用 Squoosh、ImageMagick、libvips、Sharp 或图片 CDN 的转换能力进行实验，但生产发布应固定工具版本和编码参数，避免同一资源在不同环境中结果不一致。

3. 使用 CDN 或构建流程提供格式回退

可以在构建阶段生成 AVIF、WebP、JPEG/PNG 多个版本，也可以使用图片 CDN 根据请求自动转换。使用 HTTP Accept 头进行服务端内容协商时，应正确处理缓存变化，例如响应可能需要：

Vary: Accept

如果 CDN 使用不同 URL 或缓存键区分格式，必须确认缓存键不会把 WebP 响应错误地返回给不支持 WebP 的客户端。HTML <picture> 通常更直观，也更容易和响应式尺寸组合。

4. 正确设置 MIME 类型

服务器应根据真实格式发送正确的 Content-Type，而不是只看文件名：

Content-Type: image/avif
Content-Type: image/webp
Content-Type: image/jpeg
Content-Type: image/png

如果经过压缩、转换或 CDN 处理，还要检查 Content-Encoding、缓存头、ETag 和内容是否匹配。图片 URL 不应因为扩展名和实际字节格式不一致而依赖浏览器“猜测”。

5. 处理元数据和版权

EXIF、ICC、GPS 和拍摄设备信息可能增加文件大小或泄露位置信息。公开发布前可以按业务需要清除不必要的元数据，但不能在不了解色彩管理和图片方向的情况下简单删除全部信息。图片还应确认版权、授权范围和第三方 CDN 的使用条件。

总结

结合以上介绍，可以得到这些结论：

• 没有一种格式适合所有图片；应根据图像内容、透明、动画、HDR、兼容性和实际压缩结果选择；
• GIF 的 LZW 压缩本身无损，但它的索引色和每帧最多 256 色限制使它不适合复杂照片；
• JPEG 适合照片和自然渐变，不适合透明、锐利界面图和反复重编码；
• PNG-8、PNG 真彩色和 PNG-24/32 是常见工具叫法，不能把它们误认为 PNG 规范中完全独立的格式；
• PNG 适合无损、透明、文字和线稿，照片不应默认使用 PNG；
• WebP 已经得到主流现代浏览器支持，兼容性截图中的旧版本信息应视为历史资料；
• AVIF 通常具有很好的压缩潜力，并支持透明、动画、高位深、HDR 和宽色域，但仍应根据设备和浏览器提供 WebP、JPEG 或 PNG 回退；
• APNG 是 GIF 的一种无损动画替代方案，SVG 适合矢量图标，长动画或带音频内容应评估视频；
• <picture>、srcset、sizes、正确的尺寸、懒加载和 CDN 缓存往往和格式本身同样重要；
• 最终应以真实图片、真实网络和真实设备进行测量，不要把“比某格式小 30%”或“图片通常占 60%～70%”当成固定规律。

最后附上可以继续参考的图片格式选择资料：

• MDN：Image file type and format guide
• MDN：Using responsive images in HTML
• MDN：Multimedia: Images
• Google Developers：WebP image format
• Google Developers：WebP FAQ
• AOMedia：AV1 Image File Format (AVIF)
• AOMedia：AVIF specifications
• web.dev：AVIF image format
• W3C PNG Specification
• Can I Use：WebP
• Can I Use：AVIF
• Can I Use：APNG