图片格式转换指南【2026】：PNG、JPEG、WebP、AVIF 与 SVG

图片格式转换不是简单的扩展名替换。它可能改变像素表示、元数据、色彩信息、动画、透明度或矢量指令。正确的选择应从内容和交付约束出发：图像是照片还是扁平图形，是否需要透明度或动画，目标尺寸和色彩管理如何，浏览器及下游软件支持什么格式，以及源文件是否还要继续编辑。

核心要点

• JPEG 适合照片和连续色调图像，兼容性广，但属于有损压缩且不支持 Alpha 透明度。
• PNG 适合需要无损像素、锐利边缘或透明度的栅格图形；对照片并不一定更小或更好。
• WebP 或 AVIF 可用于支持它们的交付链路，但应在目标尺寸和真实客户端上比较结果，不能假定某种格式永远占优。
• SVG 适合可信的矢量图标、标志和插图，可按尺寸栅格化；它是基于 XML 的主动内容格式，接收不可信文件时必须清洗。
• JPEG 转 PNG 不能恢复已经丢失的细节；带透明度的图片转 JPEG 前必须明确合成背景。
• 在确认输出前保留原始文件、色彩配置、授权信息和必要的元数据，并在实际显示尺寸下检查结果。

格式选择框架

这张表描述的是能力，不是永远有效的排名。小图标、两千万像素照片和需要色彩管理的印刷素材，不应使用同一套指标判断。

栅格、矢量、有损与无损

栅格格式把图像存储在像素网格中。调整栅格图片尺寸需要重采样，放大不能凭空恢复原本不存在的细节。SVG 等矢量格式存储形状、路径、文字和效果，可以在请求的尺寸上栅格化，但复杂滤镜和文字渲染仍取决于具体渲染器。

“无损”只描述某一个编码步骤，并不代表整个处理链路没有损失。PNG 可以无损保存输入像素，但输入本身可能已经经过 JPEG 编码、缩放或色彩转换而丢失细节。有损格式是否合适，应结合编码器、目标尺寸和真实观看条件评估。

各格式的工程边界

JPEG

JPEG 适合连续色调照片和渐变。它没有 Alpha 通道，色度抽样和量化可能在文字、界面边缘或高饱和色彩周围产生光晕。反复保存已经压缩过的 JPEG 可能增加伪影，因此应保留高质量源文件，并从源文件生成交付版本。

“质量”数值是编码器控制参数，不是跨工具通用的“保留像素百分比”。不同编码器、版本或色度抽样模式在相同名义数值下可能产生完全不同的结果。应比较目标尺寸下的视觉质量、文件大小、解码成本和实际视口表现。

PNG 与 APNG

PNG 使用无损滤波和 deflate 压缩，适合精确像素、锐利边缘、索引色或 Alpha 透明度重要的场景。对照片而言，它可能比调校良好的有损版本大很多。APNG 是 PNG 家族的动画扩展；静态 PNG 能显示并不代表所有处理链路都正确支持 APNG。

PNG 的透明度是 Alpha 值，不是背景色。目标格式没有 Alpha 通道时，应先选择并记录合成颜色或背景图，再进行编码。

WebP 与 AVIF

WebP 支持有损、无损、Alpha 和动画模式。AVIF 基于 AV1 图像格式，同样支持有损与无损编码、Alpha 及序列。不要把它们描述成固定的“缩小 X%”：结果会受到源图内容、尺寸、编码器实现、速度参数、色度处理和质量目标影响。

用于生产交付时，应在代表性素材集上编码，并在目标尺寸下同时测量感知质量、字节数和解码成本。如果客户端或下游编辑器不支持所选格式，应提供回退。文件更小并不自动代表体验更好；如果目标设备解码成本过高，或文字和透明边缘变差，反而可能是回归。

SVG

SVG 很适合用几何描述的标志、图标、图表和插图，不是照片的直接替代品。SVG 可能包含脚本、事件处理器、外部引用、嵌入数据或高成本滤镜。接收不可信 SVG 时应按严格策略清洗，配合限制性的内容安全策略，不要赋予用户上传的 SVG 不必要的应用权限。

只有在确定目标像素尺寸、设备像素比、字体可用性和色彩要求后，才应把 SVG 栅格化。“更高分辨率”只有相对于具体目标尺寸才有意义。

何时值得转换

当目标平台有明确要求时才转换，例如平台拒绝源格式、网页交付需要回退格式、透明素材必须合成到已知背景，或矢量图需要放入固定像素插槽。不要因为某种格式流行就无条件转换。

常见判断包括：

• PNG 转 JPEG： 不透明照片可以接受有损衍生版本时适用；若 PNG 有透明度，先决定背景。
• JPEG 转 PNG： 可以满足某些后续编辑流程，但不能恢复 JPEG 伪影，也不能恢复原本不存在的透明度。
• WebP/AVIF 转 JPEG： 适合缺少支持的旧软件或接收方；解码后要检查色彩、透明区域合成和质量损失。
• SVG 转 PNG： 适合固定尺寸的社交媒体、文档或平台插槽；应明确处理字体，并在目标尺寸检查栅格结果。
• GIF 转 WebP/AVIF/视频： 动画交付可能更高效，但还要验证自动播放、循环、可访问性和平台支持，不能只看字节数。

可复现的转换流程

1. 记录意图。 记录源文件哈希、授权、目标尺寸、裁剪策略、背景、动画行为和可接受的质量或字节预算。
2. 检查源文件。 查看色彩配置、Alpha、方向元数据、帧数、位深、嵌入缩略图，并确认文件是否确实是矢量图。
3. 确定可信源。 保留原始文件或适合编辑的主文件，不要从交付版本反复转换。
4. 固定处理工具。 记录编码器、版本、参数和色彩管理策略，不要依赖未记录的默认质量值。
5. 验证输出。 检查尺寸、方向、Alpha 行为、帧时序、元数据、色彩外观、文件完整性和解码行为。
6. 测试交付。 在真实视口和代表性设备上检查。网页可以用 picture 或 srcset 明确格式和分辨率选择。
7. 带回退和溯源发布。 保留源文件、衍生参数、输出哈希和审核结果，以便复现或撤回资源。

一个简单的响应式图片契约可以写成：

<picture>
  <source
    type="image/avif"
    srcset="/img/hero-640.avif 640w, /img/hero-1280.avif 1280w"
    sizes="(max-width: 700px) 100vw, 50vw"
  />
  <source
    type="image/webp"
    srcset="/img/hero-640.webp 640w, /img/hero-1280.webp 1280w"
    sizes="(max-width: 700px) 100vw, 50vw"
  />
  <img
    src="/img/hero-1280.jpg"
    srcset="/img/hero-640.jpg 640w, /img/hero-1280.jpg 1280w"
    sizes="(max-width: 700px) 100vw, 50vw"
    width="1280"
    height="720"
    alt="展示机械臂分拣可回收零件的照片"
  />
</picture>

回退格式不只服务于旧浏览器，也服务于编辑器、爬虫、下载流程以及和开发环境不同的客户端。

元数据、色彩与隐私

EXIF 可能包含 GPS 坐标、拍摄时间、设备标识、方向信息和缩略图。发布前应明确哪些元数据是归属、色彩、无障碍或归档所必需的，并删除或脱敏敏感字段。清理元数据不能让像素匿名，也不能消除人脸、授权义务或嵌入内容带来的风险。

色彩是转换契约的一部分。应保留配置文件，或有意地转换并记录策略，并在色彩管理和非色彩管理显示环境上检查广色域素材。删除配置文件后，或浏览器与操作系统采用不同色彩策略时，同一文件在不同查看器中可能出现偏色。

无障碍也不能靠更换格式自动获得：应保留有意义的替代文本、说明文字、动效偏好和必要动画的静态版本。格式转换无法修复难以阅读的文字、对比度不足或不可访问的交互。

常见问题

PNG 转 JPEG 一定会降低质量吗？

它会经过有损编码步骤，因此可能丢弃信息。可见影响取决于源图、编码器、色度抽样、质量目标和显示尺寸。应在目标尺寸下比较输出并保留原始文件，不能用一个名义质量百分比预测所有结果。

JPEG 转 PNG 能恢复质量吗？

不能。PNG 只能无损保存从 JPEG 解码得到的像素，无法重建此前丢失的细节、透明度或元数据。它可以满足要求 PNG 的后续流程，但不是逆转压缩。

WebP 或 AVIF 一定比 JPEG 好吗？

不一定。它们可能在特定素材集上减少字节数，但编码时间、解码成本、编辑支持、色彩行为、动画需求和回退策略同样重要。应使用产品实际服务的尺寸和客户端测量代表性素材。

带透明度的图片转 JPEG 应如何处理？

JPEG 没有 Alpha 通道。应先把源图合成到明确的背景上，检查边缘光晕，并保留原始透明素材。不要默认白色适用于所有目标场景。

可以安全接收用户上传的 SVG 吗？

默认不可以。SVG 可能包含主动内容和外部引用。应按明确的最小策略进行清洗，将其与应用权限隔离；如果场景不需要矢量行为，也可以在受控流程中栅格化。

一手来源

• W3C：SVG 2
• W3C：PNG 规范
• WebP 文档
• Alliance for Open Media：AVIF
• MDN：图片文件类型与格式指南
• ExifTool 文档

总结

最好的图片格式，是在具体场景下同时满足内容、质量、无障碍、隐私、兼容性和交付约束的格式。应把转换当作可复现的处理流水线：保留可信源文件，明确色彩和透明度决策，固定编码器，在真实显示尺寸下测试代表性输出，并保留足够的溯源信息解释发生了什么变化。