Format Atlas

指南

选择透明图像格式

选择透明图像时，要考虑是否需要半透明、照片细节或可缩放的矢量图形，并确认目标环境支持。

应该选择哪种格式？

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

  • 一般透明插图 → PNG
  • 兼顾网页文件大小的透明图 → WebP
  • 可缩放的标志和图形 → SVG

区分半透明效果与矢量图

去掉背景只是需求之一。选择前应分辨半透明边缘、照片素材以及可缩放的矢量形状。

候选格式

PNG

适用于: 保留透明效果的插图与界面素材

不太适用于: 轻量照片传输

WebP

适用于: 用于网页传输的透明图像

不太适用于: 无法确认目标环境支持的用途

SVG

适用于: 标志、图标和几何图形

不太适用于: 光栅照片

GIF

适用于: 重视兼容性的简单动画

不太适用于: 平滑的半透明效果

导出前注意事项

  • 将 PNG 转成 JPEG 无法保留透明效果。
  • 检查目标环境如何处理背景和 Alpha 透明度。

相关比较

JPEG 与 PNGJPEG 通常采用有损压缩，适合许多照片；PNG 无损保存像素并支持透明度。选择取决于图像内容、编辑需求和目标用途。PNG 与 WebPPNG 和 WebP 都可以支持透明度。PNG 是兼容性广的无损格式；WebP 可用于优化网页分发，也支持动画。请用实际素材和目标浏览器进行比较。AVIF vs WebPAVIF 和 WebP 都面向网页图片，并支持有损、无损选项及透明度。应使用相同图片比较画质、大小、编码速度和环境支持；也可以按需提供多种格式。

指南

选择网页图像格式选择格式前，先确定要提供的图像类型，以及哪些浏览器和工具必须支持。选择照片文件格式照片格式取决于你优先考虑方便分享、网页文件大小，还是制作与编辑流程的要求。

参考资料与规范