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