WebP 导出：比 JPG 更小的下一代格式
为什么 WebP 值得用
WebP 是 Google 开发的现代图像格式，在相同视觉质量下，文件体积比 JPG 小 25%-35%。同时它还具备：
- 支持透明度（不像 JPG）
- 同时支持有损和无损压缩
- 支持动画（替代 GIF）
- 现代浏览器全支持（Chrome 32+、Firefox 65+、Safari 14+、Edge 18+）
Photoshop 原生支持
从 Photoshop 23.2（2022 年）开始，PS 原生支持 WebP：
- 文件 > 存储为 → 格式选 WebP
- 文件 > 导出 > 导出为 → 格式选 WebP
- 文件 > 快速导出为 → WebP
存储为 WebP 对话框参数
选择"文件 > 存储为"并选 WebP 后，弹出参数对话框：
| 参数 | 选项 | 说明 |
|---|---|---|
| 编码 | 有损 / 无损 | 有损压缩（质量损失小、文件小）或无损 |
| 质量 | 0-100 | 有损模式下，质量越高文件越大。推荐 80-95 |
| 透明 | 开 / 关 | 保留或丢弃 Alpha 通道 |
| 预设 | 默认 / 照片 / 渐变 / 文字 / 图标 | 不同场景优化压缩策略 |
推荐设置：有损 + 质量 85 + 透明开 + 预设照片——兼顾体积和质量。
导出为 WebP 的额外优势
用"文件 > 导出 > 导出为"格式选 WebP：
- 可以同时导出多个尺寸（1x / 2x / 3x）
- 可以加文件名后缀（@2x 等）
- 可以预览效果和文件大小
- 比"存储为"多了相对大小控制
WebP vs JPG 实际对比
| 对比项 | JPG 85% | WebP 85% |
|---|---|---|
| 文件大小（示例） | 500 KB | 350 KB（小 30%） |
| 视觉质量 | 良好 | 相同质量 |
| 透明度 | ❌ | ✅ |
| 浏览器支持 | 全浏览器 | 现代浏览器（IE 不支持） |
| Adobe 软件支持 | 所有版本 | PS 23.2+、LR 11.2+ |
什么时候用 WebP
- 网站图片：所有照片、产品图都换 WebP，页面加载速度显著提升
- APP 素材：移动端 APP 的图片资源
- UI 图标：需要透明的图标用 WebP（比 PNG 小）
- 动图：替代 GIF，更小且更流畅
兼容回退
如果你的用户群还在用旧浏览器（IE11 等），可以提供双重格式：HTML 中先加载 WebP，浏览器不支持时回退到 JPG。现代网站的构建工具（Next.js、Gatsby、Astro）通常自动处理这个。