前言
PNG 和 JPG（JPEG）是网页设计中最常用的两种图片格式。许多开发者和设计师在面对选择时常常犹豫不决：到底该用 PNG 还是 JPG？本文将深入对比这两种格式的技术原理、压缩方式、文件大小、适用场景等关键差异，帮助你做出明智的选择。
一、技术原理对比
1.1 PNG 的压缩原理
PNG 采用两步压缩策略：
第一步：滤波（Filtering）
PNG 在压缩前会对每一行像素应用滤波器，尝试预测像素值以减少数据冗余。PNG 支持 5 种滤波方法：
| 滤波器 | 编号 | 预测方式 | 适用场景 |
|---|---|---|---|
| None | 0 | 不做预测 | 随机数据 |
| Sub | 1 | 使用左侧像素预测 | 水平渐变 |
| Up | 2 | 使用上方像素预测 | 垂直渐变 |
| Average | 3 | 使用左和上像素的平均值 | 平缓区域 |
| Paeth | 4 | 使用左、上、左上三个像素的加权预测 | 复杂图像 |
第二步：DEFLATE 压缩
滤波后的数据通过 DEFLATE 算法（LZ77 + 哈夫曼编码）进行无损压缩。这个过程不会丢失任何像素信息。
原始像素数据 → 滤波处理 → DEFLATE 压缩 → PNG 文件
↓
可逆操作，解压后完全还原
1.2 JPG 的压缩原理
JPG 使用基于离散余弦变换（DCT）的有损压缩算法，过程更为复杂：
原始图像 → 色彩空间转换 → 8x8 分块 → DCT 变换 → 量化 → 熵编码 → JPG 文件
各步骤说明：
- 色彩空间转换：将 RGB 转换为 YCbCr（亮度 + 两个色度通道）
- 色度子采样：利用人眼对亮度敏感、对色度不敏感的特性，减少色度信息（常用 4:2:0）
- 8x8 分块：将图像分成 8x8 像素的小块
- DCT 变换：将每个块从空间域转换到频率域
- 量化：用量化矩阵除以频率系数，这是信息丢失的关键步骤
- 熵编码：使用哈夫曼编码压缩量化后的数据
1.3 原理对比总结
| 方面 | PNG | JPG |
|---|---|---|
| 压缩类型 | 无损 | 有损 |
| 核心算法 | DEFLATE（LZ77 + Huffman） | DCT + 量化 + Huffman |
| 是否可逆 | 完全可逆 | 不可逆 |
| 多次保存 | 不会累积损失 | 每次保存都会累积损失 |
| 压缩速度 | 较慢（尤其压缩率高时） | 较快 |
| 解压缩速度 | 较快 | 较快 |
二、透明度支持
2.1 PNG 的 Alpha 通道
PNG 完整支持 8 位 Alpha 通道，每个像素可以有 256 级透明度：
PNG 像素格式（RGBA）：
R: 0-255 （红色通道）
G: 0-255 （绿色通道）
B: 0-255 （蓝色通道）
A: 0-255 （Alpha 通道：0 = 完全透明，255 = 完全不透明）
这意味着 PNG 可以实现：
- 完全透明的区域（如背景去除）
- 半透明的边缘（如柔和的阴影、毛玻璃效果）
- 平滑的透明度过渡（如渐隐效果）
2.2 JPG 不支持透明度
JPG 格式根本不支持透明通道。如果需要将 JPG 放在非白色背景上，只能：
- 在图片编辑软件中填充背景色后再保存
- 使用 CSS
mix-blend-mode属性（有限制） - 改用支持透明的格式
2.3 实际影响
| 场景 | 使用 PNG | 使用 JPG |
|---|---|---|
| 带透明背景的 Logo | 完美支持 | 需要额外处理背景 |
| 圆形头像 | 边缘平滑 | 边缘会出现白色/杂色方框 |
| 叠加效果 | 可直接叠加 | 无法实现 |
| 产品照片（无背景需求） | 可用但不必要 | 完全够用 |
三、文件大小对比
3.1 理论差异
由于压缩方式的根本差异，同一张图片在不同格式下的文件大小可能有显著差别：
一般规律：
- 照片类图片：JPG 的体积通常只有 PNG 的 1/5 到 1/10
- 简单图形：PNG 可能比 JPG 更小（尤其是大面积纯色区域）
- 文字截图：PNG 的体积优势明显，且文字更清晰
3.2 实际测试数据
以下是一组典型场景的体积对比（仅供参考）：
| 图片类型 | 尺寸 | PNG 大小 | JPG 80% | JPG 60% | WebP 80% |
|---|---|---|---|---|---|
| 风景照片 | 1920x1080 | ~3.5 MB | ~350 KB | ~180 KB | ~200 KB |
| 产品照片（白底） | 800x800 | ~1.2 MB | ~120 KB | ~65 KB | ~70 KB |
| 带文字截图 | 1280x720 | ~450 KB | ~180 KB | ~95 KB | ~100 KB |
| 图标（含透明） | 256x256 | ~15 KB | N/A（不支持透明） | N/A | ~8 KB |
| Logo（含透明） | 500x200 | ~25 KB | N/A（不支持透明） | N/A | ~12 KB |
3.3 影响文件大小的因素
对 PNG 影响最大的因素：
- 图片中颜色的种类数（颜色越多，文件越大）
- 像素的规律性（大面积纯色更容易压缩）
- 图片的物理尺寸
对 JPG 影响最大的因素：
- 质量参数设置（直接影响量化程度）
- 图片的细节复杂度（细节越多，压缩越难）
- 色度子采样设置
四、画质对比
4.1 PNG 的画质特点
PNG 使用无损压缩，因此：
- 转换前后像素数据完全一致
- 文字边缘清晰锐利
- 纯色区域干净无杂色
- 线条和几何图形保持完美
4.2 JPG 的画质特点
JPG 使用有损压缩，会引入特有的压缩伪影：
常见伪影类型：
| 伪影名称 | 表现 | 出现场景 |
|---|---|---|
| 块效应（Blocking） | 可见的 8x8 方块边界 | 低质量设置 |
| 模糊（Blurring） | 细节丢失，边缘模糊 | 中低质量设置 |
| 振铃效应（Ringing） | 边缘出现光晕 | 中高对比度区域 |
| 色彩偏移 | 颜色不准确 | 色度子采样 + 量化 |
| 蚊式噪声（Mosquito） | 文字/边缘周围的杂散点 | 文字和锐利边缘 |
4.3 不同质量设置的画质表现
质量 100%：几乎无法与原图区分，文件较大
质量 90%：肉眼很难发现差异，适合高质量展示
质量 80%：放大观察可发现轻微模糊，日常使用足够
质量 60%：细节开始明显丢失，适合缩略图
质量 40%：明显的压缩痕迹，仅适合预览
质量 20%：严重失真，几乎不可用
4.4 画质选择建议
| 用途 | 推荐格式 | 推荐质量 | 原因 |
|---|---|---|---|
| 印刷输出 | PNG 或 JPG | JPG 95%+ | 高分辨率需要高质量 |
| 全屏展示图 | JPG 或 WebP | 80%-85% | 平衡画质和体积 |
| 列表缩略图 | JPG | 60%-70% | 小尺寸不需要高画质 |
| 图标和 Logo | PNG | 无损 | 需要清晰边缘和透明 |
| 截图和图表 | PNG | 无损 | 文字需要清晰可读 |
五、性能影响对比
5.1 解码性能
| 方面 | PNG | JPG |
|---|---|---|
| 解码速度 | 较快（简单的反 DEFLATE） | 较慢（需要逆 DCT 变换） |
| 内存占用 | 解码后相同（位图数据） | 解码后相同 |
| 渐进式加载 | 不支持（但 APNG 支持动画帧） | 支持渐进式 JPG（逐步清晰显示） |
| 硬件加速 | 所有设备 | 大多数设备有 JPG 硬件解码器 |
5.2 加载性能（网络传输）
由于 JPG 的文件体积通常远小于 PNG，在网络传输方面 JPG 有明显优势：
以 1920x1080 照片为例：
- PNG: ~3.5 MB → 3G 网络下约 12 秒加载完成
- JPG: ~350 KB → 3G 网络下约 1.2 秒加载完成
- 差距: 10 倍
5.3 渐进式 JPG
渐进式 JPG（Progressive JPEG）是一种特殊的 JPG 编码方式：
- 普通 JPG：从上到下逐行显示，加载过程中图片从上到下逐渐出现
- 渐进式 JPG：先显示低分辨率的模糊版本，随数据加载逐渐变清晰
渐进式 JPG 的优势：
- 用户体验更好（先看到大致内容）
- 在慢速网络下效果更明显
- 文件大小通常比普通 JPG 还小 2%-5%
// 在 Canvas 中生成渐进式 JPG
// 注意：浏览器 Canvas API 不直接支持渐进式 JPG 设置
// 需要使用专门的库如 sharp 来实现
六、实际选择指南
6.1 选择 PNG 的场景
必须使用 PNG 的情况：
- 需要透明或半透明背景
- 图片包含大量文字、线条、图标
- 需要反复编辑保存（避免累积损失）
- 图片以大块纯色为主（如界面截图）
建议使用 PNG 的情况：
- 图片在 PNG 下体积可接受
- 对画质有严格要求
- 图片将用于进一步处理
6.2 选择 JPG 的场景
必须使用 JPG 的情况：
- 需要最小的文件体积
- 图片是照片或色彩丰富的图像
- 不需要透明背景
- 需要在所有设备和软件中保证兼容
建议使用 JPG 的情况：
- 电商产品照片
- 博客文章配图
- 社交媒体分享图片
- 邮件中的嵌入图片
6.3 混合使用策略
在实际项目中，最好的策略是混合使用两种格式：
<!-- 使用 <picture> 元素实现格式降级 -->
<picture>
<!-- 优先使用 WebP（体积最小） -->
<source srcset="photo.webp" type="image/webp">
<!-- 降级到 JPG（兼容性广） -->
<img src="photo.jpg" alt="照片描述">
</picture>
<!-- Logo 使用 PNG（需要透明） -->
<img src="logo.png" alt="网站 Logo">
<!-- 截图使用 PNG（需要清晰文字） -->
<img src="screenshot.png" alt="操作截图">
七、格式转换注意事项
7.1 PNG → JPG
转换时需要注意：
- 透明度处理：JPG 不支持透明，转换时透明区域通常会被填充为白色或黑色
- 文件大小变化：通常会大幅减小
- 画质变化：由于引入了有损压缩，画质会有所下降
// PNG 转 JPG 时处理透明背景
// 在 Canvas 上先填充白色背景，再绘制原图
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
// 填充白色背景（替代透明区域）
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制原图
ctx.drawImage(img, 0, 0);
// 导出为 JPG
canvas.toBlob(function(blob) {
// 处理转换后的 JPG Blob
}, 'image/jpeg', 0.85);
7.2 JPG → PNG
转换时需要注意：
- 文件大小变化：通常会大幅增加（5-10 倍）
- 画质变化：不会进一步损失，但已有的 JPG 压缩痕迹会被保留
- 无透明度：原来的 JPG 没有透明信息，转为 PNG 后也是完全不透明的
- 是否有意义：除非需要进一步编辑或需要避免再次压缩损失，否则通常不建议将 JPG 转为 PNG
八、总结
| 对比维度 | PNG | JPG |
|---|---|---|
| 压缩方式 | 无损 | 有损 |
| 透明度 | 支持（完整 Alpha 通道） | 不支持 |
| 文件大小 | 较大 | 较小 |
| 照片适用性 | 一般（文件太大） | 优秀 |
| 图形适用性 | 优秀 | 一般 |
| 文字清晰度 | 完美 | 可能有伪影 |
| 浏览器兼容 | 完美 | 完美 |
| 推荐用途 | Logo、图标、截图、透明图 | 照片、大尺寸展示图 |
核心原则：
- 照片和色彩丰富的图像 → 优先选择 JPG（或 WebP）
- 需要透明或包含文字/线条 → 优先选择 PNG
- 体积敏感场景 → 优先选择 JPG，调节质量到合适水平
- 不确定时 → 两种都试试，选择大小和画质都满意的