常见图片格式

发表于 2019-02-20 更新于 2025-07-26 分类于 3-计算机系统，计算机基础阅读次数： Waline：本文字数： 4.3k 阅读时长 ≈ 4 分钟

“一句话”类比

图片格式就像是打包和运送货物的不同类型的箱子：

JPEG 像一个真空压缩袋，专门装衣服（照片），能把体积压到最小，但衣服拿出来会有点皱（质量有损）。
PNG 像一个带格子的精密仪器箱，专门装易碎品（Logo、图表），保护得完好无损（质量无损），但箱子本身又大又重。
SVG 则根本不是箱子，而是一张“如何制作”的图纸，你可以根据图纸随时用原材料制作出任意大小、完美无瑕的物品（矢量图形）。

1. 关键组成

1.1 压缩算法

所有图片格式的核心都在于压缩算法，主要分为两类：

1. 有损压缩 (Lossy Compression)

原理：通过移除一部分人眼不敏感的图像数据来大幅减小文件大小。这个过程是不可逆的，丢失的数据无法恢复。
代表：JPEG、WebP (有损模式)、AVIF (有损模式)

Function JPEG_Save(image_data, quality_level):
  1. 转换色彩空间 (e.g., RGB -> YCbCr)，将亮度和色度分离。
  2. 色度抽样：由于人眼对亮度比色度更敏感，丢弃一部分色度信息。
  3. 离散余弦变换 (DCT)：将像素块转换为频率系数。
  4. 量化：根据 quality_level，粗暴地舍弃掉高频信息 (这是“有损”的关键步骤)。
  5. 熵编码 (e.g., Huffman coding)：对剩下的数据进行无损压缩。
  Return compressed_file

2. 无损压缩 (Lossless Compression)

原理：通过寻找数据中的重复模式并用更紧凑的符号来表示，从而减小文件大小。这个过程是可逆的，解压后可以 100% 还原原始数据。类似于我们用 .zip 压缩文件。
代表：PNG、GIF、WebP (无损模式)、AVIF (无损模式)

3. 矢量描述 (Vector Description)

原理：它不记录每个像素点，而是用数学方程式（点、线、曲线、形状）来描述图像。因此，它可以无限缩放而不失真。
(这段代码描述了一个半径为40、红色填充、黑色边框的圆形，而不是记录100x100个像素点。)

1
2
3

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

1.2 选择

graph TD
    A[开始: 我有一张图] --> B{它是照片/复杂渐变图吗?};
    B -- 是 --> C[使用 JPEG];
    B -- 否 --> D{需要透明背景或精确线条吗?};
    C --> E{对性能要求极高?};
    E -- 是 --> F[优先考虑 WebP / AVIF, JPEG作为备用];
    E -- 否 --> G[直接用 JPEG];
    
    D -- 是 --> H[使用 PNG];
    D -- 否 --> I{它是简单的图标或Logo吗?};
    H --> E;

    I -- 是 --> J[强烈推荐 SVG];
    I -- 否 --> K{需要简单的循环动画?};
    
    J --> L[可以在代码里
直接控制颜色/大小];
    
    K -- 是 --> M[使用 GIF 或
更现代的 APNG/WebP动画];
    K -- 否 --> N[情况特殊, 
重新审视需求或使用PNG];

    F --> Z[发布!];
    G --> Z;
    L --> Z;
    M --> Z;
    N --> Z;

2. 常见图片格式

特性	BMP	JPEG / JPG	GIF	PNG	WebP
压缩类型	无/无损	有损	无损	无损	有损 & 无损
核心优势	原始画质	极高压缩率	支持动画	完美透明度	全能高效
颜色支持	真彩色	真彩色	256色	真彩色	真彩色
透明度	❌ 不支持	❌ 不支持	✅ 简单透明(1-bit)	✅ 完美Alpha透明	✅ 完美Alpha透明
动画支持	❌ 不支持	❌ 不支持	✅ 支持	❌ 不支持*	✅ 支持
文件大小	巨大	很小	较小	较大	极小
最佳场景	几乎不用	照片、复杂图像	简单动画、表情包	Logo、图标、截图	Web端所有场景

2.1 常见格式

BMP (Bitmap)
- 核心特点: “忠实的原稿”。它几乎不进行任何压缩，原原本本地记录了图像中每一个像素的颜色信息。因为几乎不压缩，文件尺寸是所有格式中最大的，完全不适合在网络上传输。
JPEG / JPG (Joint Photographic Experts Group)
- 名字：联合图像专家组
- 压缩率极高: 能在牺牲极少人眼不易察觉的细节的情况下，将文件体积压缩得非常小。
- 色彩丰富: 支持1600万种颜色（24位真彩色），能完美展现照片的色彩过渡。
- 不支持透明: 它没有透明通道，任何透明区域都会被填充为纯色（通常是白色）。
- 边缘模糊: 对于线条、文字或Logo等边缘锐利的图像，压缩后容易产生模糊和杂色。
GIF (Graphics Interchange Format)
支持动画: 可以将多张图片序列合并成一个文件，形成循环播放的动画。
支持简单透明: 可以指定某一种颜色为透明色。
颜色数量严重受限: 最多只支持 256 种颜色。这导致它无法很好地展示彩色照片，会产生明显的色块和失真。
场景：简单的循环动画（比如网络表情包、加载中的小菊花图标）、颜色非常少的 Logo。
PNG (Portable Network Graphics)
- “质量与透明度的王者”。它是一种无损压缩格式，旨在取代 GIF 并提供更强大的功能。
- 完美的透明支持: 支持 Alpha 通道，可以实现 0% 到 100% 的半透明效果，边缘平滑，效果极佳。
- 色彩丰富: 和 JPEG 一样支持1600万种颜色。
- 文件体积较大: 尤其是对于照片这类复杂的图像，文件体积会比 JPEG 大很多。
WebP (Web Picture Format)
- 在有损模式下，同等画质比 JPEG 小 25%-34%。在无损模式下，比 PNG 小 26%。
- 虽然现在已被所有现代浏览器支持，但在一些比较老的软件或非浏览器环境中可能无法打开。
- 一个 WebP 文件可以完美地替代 JPEG、PNG 和 GIF。
- Web 端图片的首选。无论是照片、图标还是动画，使用 WebP 都能显著提升网站加载速度，优化用户体验。

3. 经验技巧

3.1 错误策略

用 JPEG 保存 Logo：这是最常见的错误。你会发现 Logo 周围有烦人的白色背景，且边缘和文字会变得模糊、有杂色。→ 解决方案：Logo、图标这类需要清晰边缘和透明背景的图，永远优先选择 PNG 或 SVG。
用 PNG 保存照片：你拍了一张 1200 万像素的美丽风景照，用 PNG 保存后发现文件有 20MB，网页加载需要半分钟。→ 解决方案：照片类（色彩丰富、没有锐利边缘）的图片，请果断使用 JPEG 或 WebP/AVIF，文件大小能轻易降到 1MB 以下。
复保存 JPEG：从网上下载一张 JPEG，用“画图”工具加个文字，保存一下；再用另一个工具裁剪一下，又保存一下。你会发现图片质量一次比一次差。→ 解决方案：如果需要多次编辑，最好保留一个原始的高质量版本（比如 PNG 或 PSD），每次都从原始版本开始编辑，最后再导出为最终需要的 JPEG。
忽视 SVG 的威力：为一个简单的“设置”图标使用了一张 512x512 的 PNG，只为了让它在高清屏上不模糊，导致文件大小几十 KB。→ 解决方案：这个图标用 SVG 可能只有 1KB，并且在任何尺寸的屏幕上都完美清晰。还能用 CSS 轻松地改变它的颜色以适应暗黑模式。

3.2 使用技巧

先优化，再上线：无论选择哪种格式，都应该使用工具（如 Squoosh、TinyPNG 或代码库）进行压缩，去除不必要的元数据，减小文件体积。
拥抱现代格式：对于 Web 开发，优先使用 WebP 或 AVIF。它们在同等质量下，体积比 JPEG 和 PNG 小得多。
避免格式反复转换：特别是不要把一个有损的 JPEG 多次编辑和保存。每次保存都会引入新的噪点和瑕疵，这叫“代际损失 (Generation Loss)”。
GIF 的 256 色限制：GIF 格式每个帧只能存储 256 种颜色，这就是为什么 GIF 动画看起来总有点“复古”和色彩断层。

4. 提问问题

4.1 jpg 和 jpeg 什么区别

JPEG 和 JPG 是完全一样的东西，只是因为早期系统要求文件后缀名不能超过3个字符，所以从 .jpeg 演变出了 .jpg 这个简写，并流传至今。

4.2 png8 和 png24 什么意思

PNG-8 是一个精选的、小号的蜡笔盒，里面最多只能装 256 支不同颜色的蜡笔。
PNG-24 是一个专业级的、超大的蜡笔盒，里面有 1670多万支不同颜色的蜡笔，几乎包含了人眼能分辨的所有颜色。
“24” 代表 24 位。它使用 8 位来表示红色(R)，8 位表示绿色(G)，8 位表示蓝色(B)。(8+8+8=24)。这使得每个像素都可以从 2²⁴（约 1670 万）种颜色中自由选择，这就是所谓的“真彩色 (True Color)”。

PNG-32 通常我们所说的带透明通道的 PNG，其实是 PNG-32。它是在 PNG-24 的 24 位颜色信息基础上，额外增加了一个 8 位的 Alpha 通道（8-bit for Alpha transparency）。
这个通道专门负责描述每个像素的透明度（从 0 到 255），从而实现了完美的、平滑的半透明效果。但行业习惯上，我们通常就统称为“支持透明的 PNG-24”。

4.3 webp 可以用作视频格式吗？

WebP 不能用作真正的视频格式，它只是一个支持动画的图片格式。

Animated WebP (动画 WebP): 本质上是一个数字翻页书 (Digital Flipbook)。它在一个文件里打包了一系列独立的 WebP 图片（帧）。虽然它也做了一些帧间优化（比如只更新画面变化的部分），但它的压缩技术根植于静态图像压缩。

用 Animated WebP 方案来替代多个 MP4 是不行的，而且可能会让情况更糟。

4.4 gif 可以不显示动图吗？

可以，但是GIF 依然受限于 256 色，显示照片会很难看。一个 GIF 文件本质上是一个或多个图像帧的容器。

当一个 GIF 文件包含多个帧并设置了延迟时间时，它就表现为动画。
当一个 GIF 文件只包含一个帧时，它就自然而然地表现为一张静态图片。