PNG、JPG 与 WebP 对比：如何选择图片格式

先看图像内容，而不是扩展名

照片和图形的压缩特征不同

照片包含连续色调和纹理，JPG 或 WebP 等有损格式通常能有效压缩。标志、截图和扁平插画则有清晰边缘与大块纯色，PNG 或无损 WebP 可能更干净。

透明需求会缩小选择范围：PNG 与 WebP 能保留 Alpha 透明度，JPG 不支持透明通道。若标志需要放在不同底色上，导出 JPG 时透明像素会被背景色替代。

本指南的工作流程示意图。

快速格式选择方法

按需求逐项判断

按内容和使用场景作决定，比习惯性地给所有图片选择同一种格式更可靠。

• 需要透明背景？选择 WebP 或 PNG；无损兼容要求明确时优先测试 PNG。
• 不透明照片？现代网页可比较 WebP，旧系统兼容优先时可选 JPG。
• 带文字的截图？以 100% 比例比较 PNG 和无损 WebP，避免过度压缩 JPG。
• 这是源文件吗？保留原件，再另存交付副本。

本指南的工作流程示意图。

案例：产品发布素材包

同一个项目可以使用多种格式

发布素材包可能同时包含主视觉照片、透明标志、界面截图和社交缩略图。照片可用 WebP 或 JPG；标志应保留 PNG 或透明 WebP；如果截图中的小字清晰度重要，则应谨慎使用有损压缩。为所有文件统一格式虽然方便，却可能造成额外体积或质量损失。

本指南的工作流程示意图。

交付前的质量检查

在真实布局中复核

1. 复制源文件，不要直接覆盖原稿。
2. 用 ImageTool.cc 转换副本并选择实际需要的尺寸。
3. 以 100% 比例检查文字边缘、透明晕边、渐变和肤色。
4. 同时检查文件体积，以及图片放入实际页面后的观感。
5. 记录项目采用的格式和质量设置，方便批量复用。