WebP、JPG、PNG 怎么选？图片格式转换前先看这个
WebP、JPG、PNG 没有绝对的最好，只有适不适合当前图片。
先按这个规则判断：
- JPG：适合照片、商品图、缩略图，不需要透明背景。
- PNG：适合透明背景、截图、logo、清晰 UI 图形。
- WebP：适合网页展示，希望体积更小且平台支持现代格式。
快速对比
| 格式 | 适合 | 注意 | ---|---|---| | JPG | 照片、商品图、缩略图 | 不支持透明，反复保存会损画质 | | PNG | 透明背景、截图、清晰图形 | 照片体积通常较大 | | WebP | 网页图片、照片和图形混合场景 | 部分老系统或上传平台不支持 |
MDN 的图片格式指南把 WebP 描述为很适合网页图片的格式，它相比 PNG 或 JPEG 有更好的压缩，并支持透明和动画。Chrome Lighthouse 文档也建议网页使用 WebP、AVIF 这类现代格式来提升加载速度。
什么时候保留 JPG？
普通照片需要最大兼容性时，继续用 JPG。表单、平台上传、邮件、CMS 和旧设计流程通常都支持 JPG。
什么时候保留 PNG？
需要透明背景，或者图里有小字、界面边缘和图标时，用 PNG 更稳。截图、示意图、logo 通常不适合压成低质量 JPG。
什么时候转 WebP？
图片用于网站，并且你的平台支持 WebP 时，可以优先转 WebP。它通常能降低页面图片体积，同时保持不错的视觉质量。
如果是要发给客户、上传表单或放进旧系统，先确认对方是否支持 WebP。
一句话总结
照片用 JPG，透明背景和清晰图形用 PNG，网页加载优化优先试 WebP。不确定时，保留原图，再根据平台分别导出不同格式。
实用流程
先明确最终用途：网页、邮件、头像、商品图、打印样张还是归档副本。然后选择最小改动：裁剪、缩尺寸、转格式、降低质量、清理元数据，对文件大小和画质的影响都不同。
保留原图，再导出工作副本。检查时不要只看 100% 放大图，也要看最终展示尺寸。100KB 的图片放在缩略图里可能很清楚，用作大图横幅就可能糊；高分辨率 PNG 用在网页预览里，也可能只是浪费加载时间。
检查清单
| 检查项 | 为什么重要 | |---|---| | 像素尺寸 | 缩小尺寸通常比盲目降低质量更有效。 | | 图片格式 | 照片、截图、透明图、图标适合的格式不同。 | | 视觉复查 | 文字边缘、渐变、logo 附近最容易出现压缩瑕疵。 | | 原图备份 | 反复导出可能让工作副本永久劣化。 |
常见问题
文件越小越好吗？
不是。目标是“足够小且看起来正常”。对 SEO 和用户体验来说，清晰且加载快的图片，比极小但模糊破损的图片更有价值。
使用场景示例
商品图应先看最终展示尺寸。如果页面或平台只显示 1200px 宽，上传 5000px 原图不一定提升用户看到的效果，反而拖慢加载。一般先缩尺寸，再选格式，最后调质量。
截图则要重点保护文字边缘。质量降得太狠，即使文件达到了 100KB，UI 标签、表格线和 logo 也可能发糊。
按图片内容选格式
照片、截图、透明图、logo 和商品图适合的格式不一样。照片通常可以用 JPG 或 WebP；有透明背景的图需要 PNG 或带透明通道的 WebP；包含小字和 UI 线条的截图，过度压缩后会很难看。
不要把整个文件夹一次性全转成同一种格式。更稳的做法是每类图片挑一张代表样例，分别比较体积、清晰度、透明背景、浏览器兼容和最终展示效果。这样才能判断 WebP、JPG、PNG 哪个真的适合当前用途。
交付场景也要考虑
网页上 WebP 很常用，但客户下载、印刷、平台上传、旧系统导入时，JPG 或 PNG 可能仍然更稳。不要只按浏览器性能决定格式，还要看图片最终会去哪里。
如果图片既要用于网页，又要交给别人编辑或印刷，可以保留一份原始 PNG/JPG，再额外导出 WebP 用于网页加载。
图片要按最终用途判断
对比 WebP、JPG、PNG 在照片、截图、透明背景、商品图和网页性能里的区别，帮你判断什么时候该转换格式。 图片处理要先看最终展示位置。头像看圆形小图，频道封面看移动端裁剪，截图看文字边缘，商品图看颜色和细节。只在编辑器里看大图，很容易误判。
建议保留原图，再导出工作副本。用“转换图片格式”处理后，把结果放回真实使用场景预览一次：该清楚的主体是否还清楚，该保留的边缘是否被裁掉，平台是否二次压缩。
参考资料：