PNG以无损/近无损著称,适合需要透明背景、图标、线稿等;WebP在同等视觉质量下通常体积更小,适合网页大图与需要兼顾清晰度与加载速度的场景。
1) 透明背景稳定;2) 边缘锐利(尤其是文字/图标);3) 适合UI图标、截图、扁平插画。缺点是:照片类素材体积往往很大。
WebP可以在较小体积下保留不错的细节,适合Banner、商品图、摄影图。它也支持透明,但在极细边缘上有时不如PNG“硬朗”。
推荐用“导出为(Export As)”或“存储为Web所用格式(旧版)”:先确认尺寸正确,再选择格式。PNG建议检查是否启用透明;WebP建议先用中等质量导出,对比细节与体积,再微调。
1) 是否发生了非整数缩放(如缩到83%);2) 是否有半透明像素叠在背景上;3) 导出时是否被强制重采样。图标类尽量按整数倍导出(1x/2x/3x)。
需要“硬边+透明”的UI图标/线稿:优先PNG。网页照片/大图想减体积:优先WebP。拿不准就两种都导出对比:看体积差与边缘是否可接受。