PSD、PNG、JPEG、WebP、AVIF:怎么选
五种格式回答五个不同的问题。按真正决定项目的维度对比:有损无损、透明、图层、动图与浏览器支持。
关于格式的争论经常跑偏,因为大家在比压缩率。真正该问的是:这个文件需要扛住什么——后续编辑、交付、透明、动图,还是归档。
一句话版本
- PSD — 工作文件。图层、蒙版、文字、路径。永远不是网页交付格式。
- PNG — 无损交付,支持 Alpha。截图、界面、扁平插画、Logo 的最佳选择。
- JPEG — 有损交付,没有 Alpha。其他格式都不支持时的兜底。
- WebP — 有损或无损,支持 Alpha 与动图。网页照片的务实默认值。
- AVIF — 同画质下体积最小,代价是编码慢、工具链薄。
按关键维度对比
| PSD | PNG | JPEG | WebP | AVIF | |
|---|---|---|---|---|---|
| 图层 | 有 | 无 | 无 | 无 | 无 |
| Alpha 透明 | 有 | 有 | 无 | 有 | 有 |
| 无损选项 | 有 | 有 | 无 | 有 | 有 |
| 动图 | 无 | 有(APNG) | 无 | 有 | 有 |
| 照片典型体积 | 很大 | 大 | 小 | 更小 | 最小 |
| 普遍支持 | 编辑器 | 是 | 是 | 是 | 基本是 |
PSD 不是交付格式
PSD 存的是”怎么生成这张图”的指令,而不是你要发出去的那张图。它带着逐图层的通道、蒙版、调整参数,末尾还有一张常常比导出结果更大的拼合预览图。客户要可编辑源文件时发 PSD 是对的;发给网站就是错。
实用规则:PSD 留在工作目录,PNG / WebP / JPEG 去目的地。文件为什么长这样,见 PSD 文件结构那篇。
扁平素材:PNG 还是 WebP
截图和界面用 PNG 依然很好,而且无损。同样的像素,WebP 无损通常比 PNG 小 15–25%,浏览器全支持。
代价在工具链:一些设计流程与文档系统处理 PNG 更可预期。如果图片要过构建步骤或被 CMS 重新编码,先确认它对 WebP 做了什么再切换。
照片:JPEG、WebP 还是 AVIF
在视觉画质对齐的前提下,排序很稳定:AVIF 最小、WebP 次之、JPEG 最大。差距在本来就很平滑的图上变小,在细节纹理上变大。
真正决定选择的是:
- 编码时间。AVIF 编码慢到会影响构建流水线;WebP 很快;JPEG 几乎瞬时。
- 解码开销。超大 AVIF 在低端手机上解码更费 CPU。首屏大图建议在中端机上实测。
- 支持面。AVIF 现在铺得很广但不是全部,降级链仍然值得留。
透明才是真正的分界线
只要需要 Alpha 通道,JPEG 立刻出局,剩下 PNG、WebP、AVIF。边缘锐利的 Logo 用 PNG 或 WebP 无损;边缘柔和的抠图主体,带 Alpha 的有损 WebP 在体积上通常赢一大截。
一个陷阱:很多工具导出的”透明 PNG”其实是白底透明白,只有在深色页面上才暴露。要按 导出清单 里的方法主动拼合。
一套决策流程
- 以后还要改?→ 留一份 PSD。
- 需要透明?→ 扁平素材 PNG,照片 WebP。
- 是给网页用的照片?→ WebP,流水线扛得住编码时间就上 AVIF。
- 目标只收 JPEG?→ JPEG,质量 82–85。
- 其他情况 → PNG 无损,对屏幕素材永远不会错。
在这些格式之间转换,在 PhotoPSD 编辑器 里是两分钟的事:打开、拼合成该交付的样子、导出。目前支持 PSD、PNG、JPEG、WebP;最常见的转换流程见 PSD 转 PNG。
不用等下载,现在就能试
打开分层 PSD、改完导出 PNG,文件不上传。