Format Atlas

指南

选择网页图像压缩与动画格式

区分照片、透明效果、动画与兼容性需求。应在目标环境比较实际文件，不要仅凭格式名断定大小或画质。

应该选择哪种格式？

根据文件在工作流程中的用途选择格式。

  • 面向广泛用户的照片 → JPEG
  • 透明静止图像 → PNG
  • 优化网页传输 → WebP 或 AVIF
  • 带透明效果的简短无损动画 → APNG
  • 在支持 JPEG XL 的环境评估压缩 → JPEG XL

先确认兼容性

新格式在浏览器、应用、CDN 和转换工具中的支持程度不同。采用前明确目标环境并测试回退图片。

将动画和视频分开考虑

APNG、GIF 和动画 WebP 适合短循环或界面效果。较长内容或带音频的素材应另选视频容器与编码格式。

候选格式

JPEG

适用于: 重视广泛支持的照片传输

不太适用于: 需要透明效果的插图

PNG

适用于: 透明静止图像和插图

不太适用于: 缩减照片文件大小

WebP

适用于: 优化网页图像传输

不太适用于: 未确认支持就强制使用

AVIF

适用于: 已确认支持 AVIF 的网页传输

不太适用于: 不加区分地传给旧环境

APNG

适用于: 简短透明动画

不太适用于: 传输较长视频

JPEG XL

适用于: 在支持 JPEG XL 的环境评估图像

不太适用于: 未确认兼容性的一般分发

导出前注意事项

  • 编码设置、图像内容和显示尺寸都会影响文件大小与画质。
  • 采用新格式前确认目标浏览器与回退图片。

相关比较

JPEG 与 PNGJPEG 通常采用有损压缩，适合许多照片；PNG 无损保存像素并支持透明度。选择取决于图像内容、编辑需求和目标用途。JPEG 与 WebPJPEG 在照片场景中兼容性广泛；WebP 支持有损和无损压缩，也支持透明度。网页分发效果取决于源图、编码设置和目标浏览器。JPEG XL 与 AVIFJPEG XL 与 AVIF 是不同的图像编码格式，功能和实现支持各有差异。实际选择取决于浏览器、应用、编码器和分发路径，而不仅是格式宣称的能力。JPEG XL 与 WebPJPEG XL 与 WebP 是不同的图像格式，在功能以及浏览器和工具支持方面各有差异。WebP 已用于许多网页流程；只有确认客户端支持和完整分发链路后，才考虑 JPEG XL。GIF vs APNGGIF 和 APNG 都能包含多个帧。GIF 常用于简单循环动画；APNG 扩展 PNG 以支持动画、无损帧和透明度。应比较目标环境支持及实际文件大小。APNG 与 WebP 对比APNG 和 WebP 都支持动画与透明度。APNG 扩展 PNG 以实现无损动画；WebP 提供面向网页的有损和无损编码。

指南

选择网页图像格式选择格式前，先确定要提供的图像类型，以及哪些浏览器和工具必须支持。选择照片文件格式照片格式取决于你优先考虑方便分享、网页文件大小，还是制作与编辑流程的要求。选择透明图像格式选择透明图像时，要考虑是否需要半透明、照片细节或可缩放的矢量图形，并确认目标环境支持。选择动画格式短循环可使用 GIF 或动画 WebP/AVIF。若需要更长时长、音频或播放控制，请考虑视频，并在目标环境测试实际文件。

参考资料与规范