导出格式选择：PNG JPG GIF SVG 怎么选
四种主流格式一览
| 格式 | 压缩方式 | 透明支持 | 适用场景 |
|---|---|---|---|
| PNG | 无损 | ✅ | UI 设计、Logo、需要透明的图片 |
| JPG | 有损 | ❌ | 照片、摄影作品、网页图片 |
| GIF | 无损（色彩表） | ✅（1-bit） | 简单小动画、表情图 |
| SVG | 矢量描述 | ✅ | 图标、矢量图形、Logo（可无限放大） |
| WebP | 有损/无损 | ✅ | 网页图片（同质量体积比 JPG 小 25%-35%） |
PNG：像素完美的选择
优点：
- 无损压缩，不丢失任何像素信息
- 支持 Alpha 通道透明度（32-bit）
- 压缩比高（对纯色、大面积相同颜色的图特别好）
缺点：
- 照片类图片压缩效果差（文件大）
- 不支持动画
导出参数：
- PNG-8：256 色 + 1-bit 透明（文件小，适合简单图标）
- PNG-24：1600 万色 + 1-bit 透明
- PNG-32：1600 万色 + Alpha 通道（真正的渐变透明）
JPG：照片的首选
优点：
- 文件小，压缩比高
- 浏览器和应用广泛支持
缺点：
- 有损压缩（每次保存都会损失质量）
- 不支持透明度
导出参数（质量滑块）：
- 80%~90%：日常网页、展示用（几乎看不出损失）
- 100%：极高质量，但文件很大
- 不要反复保存 JPG——每次保存都会累积画质损失
GIF：只适合简单动画
GIF 格式年代久远，如今只剩一个用途：简单小动画（表情、loading icon）。但 PS 的"导出为"对话框里也支持导出静态 GIF。现在大部分动图场景已经被 WebP 和 APNG 替代。
SVG：矢量图形的最佳选择
SVG 是 XML 描述的矢量格式，理论上可以无限放大而不模糊。Photoshop 支持导出 SVG：
- 适合：图标、Logo、简单矢量插画
- 从形状/矢量路径导出：右键形状图层 → 导出为 → SVG
- 不适合：位图照片无法导出为有意义的 SVG（会被栅格化）
WebP：网页的未来格式
WebP 同时支持有损和无损压缩，且有 Alpha 通道。与同等质量的 JPG 相比，WebP 文件体积小 25%~35%。现代浏览器（Chrome、Firefox、Edge、Safari 14+）都支持。
Photoshop 原生支持导出 WebP：文件 > 导出 > 导出为 → 格式选 WebP。