跳到主要内容

PNG/GIF/JPG 的区别？如何选择？

面试速答（30 秒版 TL;DR）​

  • JPG/JPEG：有损压缩，最适合照片/写实图；不支持透明；反复保存会累积损伤。
  • PNG：无损压缩，支持Alpha 半透明，适合截图、UI、文字、线条、图标；照片通常比 JPG 大。
  • GIF：最多 256 色（8-bit 调色板），支持逐帧动画；透明只有“全透明/不透明”（1-bit）；同质量动画体积通常很大。
  • 如何选：照片优先 JPG；需要透明/边缘干净优先 PNG；需要简单动图才用 GIF（更推荐用视频或现代格式替代）。

心智模型：先看“信息密度”和“特性约束”​

你可以用两句话概括三者差异：

  1. JPG 用“丢信息”换体积（有损）：对照片这类“高频细节多”的内容更划算。
  2. PNG/GIF 更像“保信息”（无损），但 GIF 额外被 256 色 限死；PNG 则更通用，尤其是透明和边缘质量。

关键对比（面试最常问的维度）​

维度JPG/JPEGPNGGIF
压缩方式有损（常见）无损（常见）无损（但受调色板限制）
色彩24-bit 真彩（常见）24-bit 真彩，甚至更高位深（常见 24/32）8-bit 调色板（最多 256 色）
透明不支持支持 Alpha 半透明仅 1-bit 透明
动画不支持标准 PNG 不支持（但有 APNG）支持动画
典型用途照片、背景大图截图、UI、icon、需要透明的图表情包、简单动图（短、色少）
常见坑文字边缘发糊、块状压缩伪影、反复保存变差照片体积膨胀、未压缩优化导致过大颜色断层、体积爆炸、透明边缘锯齿
一个常见误区

“PNG 一定比 JPG 清晰”不对。PNG 更像“尽量不丢信息”，但同等视觉效果下，照片用 PNG 往往只是更大而已。

如何选择：按场景做决策​

1）照片/写实图（人像、风景、产品图）​

  • 优先 JPG/JPEG：体积更小，加载更快。
  • 细节要求高时：
    • 用更高质量参数导出（避免低质量导致“蚊子噪点/块效应”）。
    • 保留原始无损素材（如 PNG/TIFF/RAW），线上再导出 JPG，避免多次编辑保存带来的代际损伤。

2）截图、UI、文字、线条、图标、二维码​

  • 优先 PNG：
    • 文字/线条在 JPG 下容易出现边缘毛边和色块（有损压缩对硬边不友好）。
    • 需要透明背景（尤其是半透明阴影、圆角、抗锯齿边缘）只能选 PNG（或其他支持 Alpha 的格式）。

3）动图（短、色少的表情/演示）​

  • 只要是“逐帧动图”，GIF 能用但不一定该用：
    • GIF 颜色只有 256 色，很容易出现色带。
    • 动画 GIF 往往体积很大。
  • 工程实践更常见的选择：
    • 能用视频就用视频（例如 MP4/WebM），同等观感体积通常更小。
    • 需要透明动画时，可考虑 APNG/WebM + alpha（视兼容与业务要求）。

一张图记住“选型流程”​

典型题 & 标准答法​

Q1：JPG 和 JPEG 有什么区别？​

基本没有区别：JPEG 是格式名，JPG 是常见扩展名（历史上为了适配 8.3 文件名长度限制）。

Q2：为什么文字/截图不适合用 JPG？​

要点：

  • JPG 是有损压缩，擅长“平滑渐变”的照片类内容。
  • 文字/线条属于“硬边 + 高对比”，有损压缩容易在边缘产生块效应/振铃，看起来发糊。

Q3：GIF 为什么颜色少？​

要点：

  • GIF 使用 调色板：每帧最多 256 色（8-bit 索引）。
  • 对照片类内容会明显失真，但对色块简单的表情/小动画还能接受。

常见追问（加分项）​

  • PNG-8 vs PNG-24/32？
    • PNG-8 类似“带调色板的 PNG”，体积可能更小，但颜色受限；PNG-24/32 更适合真彩与透明。
  • 透明的差异？
    • GIF 只有 1-bit 透明（要么透明要么不透明），边缘容易锯齿；PNG 支持 Alpha 半透明，边缘更自然。
  • 为什么线上常见 WebP/AVIF？
    • 因为它们通常能在更小体积下提供更高画质或更多特性（透明/动画等），但需要做兼容回退策略（HTML 可用 <picture>）。

易错点/坑​

  • 把动画全做成 GIF：同等体验下体积经常比视频大一个量级，移动端很亏。
  • 对 JPG 反复“编辑后另存为”：会出现明显的代际损伤；正确做法是保留无损源文件，最终再一次性导出 JPG。
  • 把照片存成 PNG：不是不能用，而是经常“无意义变大”；除非你确实需要无损或透明等特性。

速记要点（可背诵）​

  • 照片：JPG；透明/截图/UI：PNG；动图：GIF（但优先考虑视频/现代格式）。
  • PNG：无损 + Alpha；GIF：256 色 + 动画；JPG：有损 + 省体积。