2.3 文件格式全解：PSD/JPG/PNG/SVG/GIF
一、文件格式的核心意义
文件格式是数字图像的存储规则，决定了：
- 信息保留程度（图层/透明度/动画）
- 压缩方式与画质损失
- 跨平台兼容性
- 特殊功能支持（如网页交互性）
二、五大格式深度解析
1. PSD（Photoshop Document）
定义：Adobe原生工程文件格式，保留所有编辑信息。
核心特点：
- 支持图层、蒙版、调整图层、智能对象等非破坏性编辑数据
- 兼容Photoshop所有功能（如3D/视频图层）
- 文件体积大，不适合直接传播
适用场景：
- 设计稿存档
- 团队协作（保留可编辑性）
- 多版本迭代（通过“图层复合”保存不同方案）
保存设置：
- 勾选“最大兼容”（确保其他软件可读取）
- 启用“压缩”（减少文件体积，不影响编辑）
注意事项：
- 低版本PS无法打开高版本PSD文件
- 导出印刷文件前需合并隐藏图层
2. JPEG/JPG（Joint Photographic Experts Group）
定义：有损压缩格式，专为摄影图像优化。
核心特点：
- 8位色深，不支持透明度
- 压缩率可调（质量1-12级）
- 色域适配sRGB，适合屏幕显示
适用场景：
- 网页图片/社交媒体配图
- 摄影作品网络传播
- 需要小体积的预览图
保存设置：
- 质量选择：网页用60-80%，印刷用90-100%
- 勾选“优化”（减小体积）和“嵌入颜色配置文件”
注意事项：
- 反复保存会累积画质损失
- 不适合文字/线条图（边缘模糊）
3. PNG（Portable Network Graphics）
定义：无损压缩格式，支持透明度。
核心特点：
- 8/24位色深，支持Alpha通道透明
- 采用DEFLATE压缩算法（无画质损失）
- 文件体积通常大于JPG
适用场景：
- 网页图标/LOGO（需透明背景）
- 屏幕截图（保留文字清晰度）
- 需要多次编辑的中间文件
保存设置：
- PNG-8（256色）：适用于简单图形
- PNG-24（1600万色）：适用于照片级图像
- 勾选“交错”（渐进式加载）提升网页体验
注意事项：
- 透明区域在部分软件中显示为灰格子（需添加底色）
- 不支持CMYK色彩模式
4. SVG（Scalable Vector Graphics）
定义：基于XML的矢量图形格式。
核心特点：
- 无限放大不模糊
- 支持动画/交互（通过CSS/JavaScript）
- 文件体积小，适合响应式设计
适用场景：
- 网页图标/UI元素
- 激光雕刻/大幅面印刷
- 需要动态修改的图形（如数据可视化）
导出方法：
1. 在PS中将矢量图层（形状/文字）转换为智能对象
2. 文件→导出→导出为→选择SVG格式
3. 勾选“保留编辑功能”（保留CSS样式代码）
注意事项：
- 栅格化图层（如位图）导出后会转为PNG嵌入
- 复杂路径可能导致渲染卡顿
5. GIF（Graphics Interchange Format）
定义：支持256色与动画的古老格式。
核心特点：
- LZW无损压缩算法
- 支持单帧透明色（非Alpha通道）
- 可制作循环动画
适用场景：
- 简单动图（表情包/加载动画）
- 低色彩需求的图标
- 兼容性要求极高的场景（如老旧系统）
保存设置：
- 颜色表：选择“局部（选择性）”减少色阶断层
- 抖动算法：扩散（模拟更多颜色层次）
- 循环选项：永久循环/指定次数
注意事项：
- 大尺寸动图体积爆炸式增长（建议限制在500×500px内）
- 渐变色易出现色带（Band）现象
三、格式选择指南
选择决策树：
```
需要保留图层？ → 是 → PSD
↓
否 → 需要透明背景？ → 是 → PNG（静态）/GIF（动画）
↓
否 → 是照片或渐变图？ → 是 → JPG
↓
否 → 是矢量图形？ → 是 → SVG
↓
否 → GIF