图片格式底层指南：压缩、透明通道与多格式回退

很多图片格式问题，并不是因为选错了某个扩展名，而是因为没有先想清楚图片流程：源文件是什么、是否需要透明背景、后续是否还要编辑、最终是在网页加载还是交给别人使用、浏览器或软件不支持时应该回退到什么格式。

本文不是简单重复“照片用 JPG、图标用 PNG”。如果你只需要快速判断，可以看这篇更短的 PNG/JPG/WebP/AVIF 选择指南。这里会更系统地解释压缩方式、透明通道、响应式交付和 SVG 转位图时容易出错的地方。

先看使用流程，不要先看扩展名#

选择格式前，先问五个问题：

1. 源文件是矢量图、截图、UI 图、照片，还是生成图？
2. 最终图片是否需要透明像素？
3. 文件后续还要编辑、插入文档，还是只在网页展示？
4. 网站能不能同时生成多种输出格式？
5. 旧浏览器、CMS、邮件客户端或桌面软件不支持时，安全回退格式是什么？

同一张图可能需要多个版本。Logo 可以在网页头部保留 SVG，给媒体资料包时导出 PNG，如果它是较大的装饰位图，再考虑 WebP 或 AVIF。商品照片可以保留高质量原图，网页上用 AVIF/WebP，平台不支持时再导出 JPEG。

有损和无损，是最核心的分界线#

图片格式最重要的差异，不是“新旧”，而是 有损压缩 和 无损压缩。

无损压缩 会保留可恢复的像素信息。PNG 是网页中最常见的例子。它适合边缘必须清楚的内容：图标、截图、UI 界面、流程图、技术示意图、包含文字的图片。

有损压缩 会丢掉一部分人眼通常不敏感的信息。JPEG、有损 WebP、有损 AVIF 都属于这一类。它们适合照片、复杂渐变和大面积自然纹理，因为这些内容对“精确像素”没那么敏感，但对文件大小很敏感。

问题通常出现在内容和压缩方式不匹配时：

这也是为什么反复转格式很危险。JPEG 反复保存会持续损伤细节。AVIF 转 PNG 可以提高兼容性，但不能恢复 AVIF 源文件里已经丢失的细节。

透明通道会直接改变选择#

透明背景不是一个小功能，它会直接排除一部分格式。

JPEG 不支持 alpha 透明。如果把透明 SVG 或 PNG 转成 JPEG，透明像素必须被铺到某个背景色上。白底商品卡片也许没问题，但图标、Logo、徽章如果要同时放在深色和浅色背景上，就不能随便铺底。

PNG、WebP、AVIF 都可以支持透明，但它们在实际工作流里并不完全等价：

还要注意“白边”和“脏边”。如果一张透明图在转换前已经被铺到白底，再放到深色背景上，边缘可能会露出白色痕迹。Logo、图标、徽章这类素材，最好保留干净的 SVG 或透明 PNG 母版。

各格式在流程里的角色#

成熟的图片流程里，每种格式都有自己的角色。

PNG 是精确和兼容优先的格式。适合截图、UI 图、透明交付素材、带文字的图形。大照片不建议用 PNG，除非你明确需要无损归档。

JPEG 仍然是照片的安全基础格式。浏览器、CMS、邮件工具、社交平台和文档软件基本都能处理。缺点是不支持透明，不适合保存清晰边缘的 UI 图。

WebP 是实用的现代网页交付格式。它支持有损、无损、透明和动画。浏览器支持已经很广，但离开浏览器以后，很多工作流仍然更偏好 PNG 或 JPEG。

AVIF 在网页性能上很强，尤其适合照片和高分辨率图像。它也可以支持透明和高位深，但最好配合 fallback 使用，而且某些后台上传、设计软件和文档工具可能不接受。更具体的 AVIF 使用边界，可以看 AVIF 图片格式指南。

用 picture 做格式回退#

公开网页不要强行让所有用户加载同一种格式。让浏览器根据支持情况选择最合适的版本。

照片类图片可以这样写：

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img
    src="/images/product.jpg"
    alt="白色桌面上的胡桃木收纳盒"
    width="1200"
    height="800"
    loading="lazy"
  >
</picture>

透明图形可以这样写：

<picture>
  <source srcset="/images/badge.avif" type="image/avif">
  <source srcset="/images/badge.webp" type="image/webp">
  <img
    src="/images/badge.png"
    alt="安全认证徽章"
    width="320"
    height="160"
  >
</picture>

顺序很重要：把更高效、可接受的格式放前面，再回退到兼容性更强的格式。浏览器只会下载最终选中的那个候选资源。

不只要换格式，还要控制尺寸#

只改成 AVIF 或 WebP，并不等于优化完成。如果移动端只显示 390px 宽，却下载 2400px 宽的图片，格式再先进也会浪费带宽。

同一张图在不同布局宽度下展示时，应配合 srcset 和 sizes：

<picture>
  <source
    type="image/avif"
    srcset="/hero-640.avif 640w, /hero-1280.avif 1280w, /hero-1920.avif 1920w"
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <source
    type="image/webp"
    srcset="/hero-640.webp 640w, /hero-1280.webp 1280w, /hero-1920.webp 1920w"
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <img
    src="/hero-1280.jpg"
    srcset="/hero-640.jpg 640w, /hero-1280.jpg 1280w, /hero-1920.jpg 1920w"
    sizes="(max-width: 768px) 100vw, 1200px"
    alt="带有导出图片素材的设计工作台"
    width="1280"
    height="720"
  >
</picture>

这样可以避免一种常见的“假优化”：格式变新了，但像素仍然发太多。

SVG 导出位图时要先确定尺寸#

SVG 是矢量，PNG、JPEG、WebP、AVIF 是位图。把 SVG 转成位图时，必须先确定输出尺寸，因为转换那一刻才会真正生成像素。

建议规则：

• 图标、Logo 需要透明和广泛兼容时，导出 PNG。
• 按实际显示尺寸导出；高密度屏幕可以导出 2x 或 3x。
• 只有在 SVG 内容接近照片、且不需要透明时，才考虑 JPEG。
• WebP/AVIF 更适合作为网页交付格式，前提是测试过 fallback。
• 原始 SVG 应该保留，作为可编辑源文件。

如果你遇到 SVG 转 PNG 变糊、边距不一致、透明背景丢失，可以继续看 SVG 转 PNG 后变模糊怎么办 和 批量 SVG 转 PNG 的尺寸、边距和透明背景规范。

元数据、颜色和二次压缩#

图片文件里可能包含相机信息、颜色配置、版权字段和缩略图。优化工具为了减小体积，常常会删除这些信息。普通网页图通常没问题，但摄影作品、印刷交付和归档文件要谨慎。

颜色也会影响转换结果。如果转换后颜色变了，检查源文件是否带有色彩配置，转换工具是否保留或统一了它。网页交付一般建议输出一致的 sRGB，除非你有明确的广色域管理需求。

不要把网页优化后的图片当成唯一母版。更稳的流程应该保留：

• 原始或可编辑源文件
• 必要时的高质量中间文件
• 网页交付输出
• 兼容性回退格式

一个实用的生产流程#

可靠的图片流程通常是：

1. 保留原始源文件：SVG、设计稿、RAW 照片或高质量位图。
2. 生成网页输出：AVIF 和 WebP 给现代浏览器。
3. 生成回退输出：照片用 JPEG，透明图用 PNG。
4. 设置尺寸、width、height、alt、loading 和响应式 sizes。
5. 测试页面里的实际渲染效果，而不是只看导出的单个文件。
6. 把交付文件和网页交付文件分开管理。

这比“保存一次就完事”麻烦一些，但能避免常见问题：图标发糊、页面过重、透明背景丢失、后台拒绝上传、旧浏览器没有回退。

发布前检查清单#

发布图片前确认：

• 格式和内容类型匹配。
• 透明背景被保留，或者已经有意铺底。
• 输出尺寸没有明显大于展示尺寸。
• 现代格式有安全回退。
• 文字和 Logo 没有保存成低质量 JPEG。
• 网页图片有 alt、width 和 height。
• 原始源文件仍然可用于后续修改。

所谓“最佳图片格式”，通常不是某一个扩展名，而是一个适合当前任务的输出：足够清晰、足够小、足够兼容，并且来自一个以后还能继续编辑的源文件。