2.3 文件格式全解：PSD/JPG/PNG/SVG/GIF

欢迎大家来到IT世界,在知识的湖畔探索吧!

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