常见的图片格式
最近的工作有处理图片的需求，乘着这次机会，把市面上大部分常见的图片格式梳理下。
何为图片？
图片说白了就是记录像素信息的一个数据块，有一些基础概念吧 像是什么 色彩空间、像素格式、编解压缩 之类的，感兴趣可以看看 这篇BLOG ，在此 我们只针对压缩质量以及图片效果来讨论常见的几种图片格式。
常用图片格式
这张表格涵盖了目前网络和数码设备上最常见的几种图片格式
| 格式 (Format) | 优点 (Advantages) | 缺点 (Disadvantages) | 主要特点 (Key Characteristics) |
|---|---|---|---|
| JPEG / JPG | ⦿ 高压缩率：非常适合存储和传输照片，文件体积小。 ⦿ 色彩丰富：支持 1670 万色（24位真彩色），能很好地展现色彩渐变。 ⦿ 兼容性极佳：几乎所有设备和软件都支持。 |
⦿ 有损压缩：每次保存都会损失图片质量，不适合需要重复编辑的图片。 ⦿ 不支持透明：无法保存透明背景。 ⦿ 不适合线条和文字：压缩算法会在清晰边缘（如文字、logo）周围产生模糊的噪点 (artifacts)。 |
◈ 压缩方式: 有损压缩 ◈ 适合场景: 照片、色彩丰富的图片、网络传输 ◈ 透明: 否 ◈ 动画: 否 |
| PNG | ⦿ 无损压缩：保存时不会损失任何图像信息，适合需要高质量和重复编辑的图片。 ⦿ 支持透明度：支持 Alpha 通道，可以实现完美的透明和半透明效果。 ⦿ 线条和文本清晰：非常适合保存 Logo、图标、图表和截图。 |
⦿ 文件体积较大：通常比同样内容的 JPEG 文件大很多，尤其是在存储照片时。 ⦿ 不适合打印: 某些旧的打印软件可能不支持PNG，且它通常使用RGB色彩空间而非打印常用的CMYK。 |
◈ 压缩方式: 无损压缩 ◈ 适合场景: Logo、图标、需要透明背景的图片、网页设计元素 ◈ 透明: 是 (Alpha通道) ◈ 动画: 否 (APNG是其动画变体，但不如GIF普及) |
| GIF | ⦿ 支持动画：是制作简单循环动画的标准格式。 ⦿ 文件小：对于只有少量颜色的简单图形，文件体积非常小。 ⦿ 支持透明：支持1位透明（即完全透明或完全不透明，没有半透明）。 |
⦿ 颜色限制：最多只支持 256 种颜色，不适合色彩丰富的照片。 ⦿ 画质较差：颜色数量限制和压缩算法导致图像质量不高，容易出现色带。 ⦿ 无半透明：不支持 Alpha 通道半透明。 |
◈ 压缩方式: 无损压缩 (但颜色受限) ◈ 适合场景: 动态表情包、简单的动画Logo、小图标 ◈ 透明: 是 (1位透明) ◈ 动画: 是 |
| WebP | ⦿ 更小的文件体积：在同等画质下，WebP 的有损文件比 JPEG 小 25-34%，无损文件比 PNG 小 26%。 ⦿ 功能全面：同时支持有损和无损压缩、透明度和动画。 ⦿ 现代浏览器支持：已被所有主流现代浏览器支持。 |
⦿ 兼容性问题：一些老旧的软件或系统（如某些版本的 Photoshop）可能需要插件才能支持。 ⦿ 编码/解码消耗: 可能比JPEG需要更多的计算资源。 |
◈ 压缩方式: 有损和无损 ◈ 适合场景: 网页图片，旨在替代 JPEG, PNG, 和 GIF ◈ 透明: 是 (Alpha通道) ◈ 动画: 是 |
| SVG | ⦿ 矢量格式：无论如何缩放都不会失真，保持绝对清晰。 ⦿ 文件极小：文件体积通常非常小，因为它存储的是路径和形状的指令，而非像素。 ⦿ 可用代码编辑：可以用文本编辑器或 CSS/JS 直接修改颜色、形状和动画，交互性强。 |
⦿ 不适合复杂照片：无法用于表示像素级的复杂图像，如照片。 ⦿ 渲染开销：复杂的 SVG 图像可能会增加浏览器的渲染负担。 |
◈ 类型: 矢量图形 (基于XML) ◈ 适合场景: Logo、图标、数据图表、可交互的网页图形 ◈ 透明: 是 ◈ 动画: 是 (通过 SMIL 或 CSS/JS) |
| AVIF | ⦿ 极致的压缩率：新一代格式，基于 AV1 视频编码。在相同画质下，比 WebP 甚至 JPEG 文件小得多。 ⦿ 功能先进：支持高动态范围（HDR）、更广的色域和更高的色深（8, 10, 12-bit）。 ⦿ 支持透明和动画。 |
⦿ 兼容性是最大障碍：虽然主流浏览器已支持，但在操作系统、老旧软件和设备上的支持仍然有限。 ⦿ 编码耗时：创建 AVIF 文件比其他格式需要更长的时间和更多的计算资源。 |
◈ 压缩方式: 有损和无损 ◈ 适合场景: 高性能网页、需要极致压缩和高质量的场景 ◈ 透明: 是 ◈ 动画: 是 |
如何选择？
graph TD
A[开始: 我有一张图片] --> B{是照片或复杂的彩色图片吗?};
B -- 是 --> C{是否极其看重文件大小和加载速度};
B -- 否 --> D{是Logo、图标还是简单线条图形};
C -- 是 --> E{浏览器和设备是否支持AVIF};
C -- 否 --> F[使用 JPEG];
E -- 是 --> G[使用 AVIF];
E -- 否 --> H[使用 WebP];
D -- 需要缩放后保持绝对清晰吗? --> I[使用 SVG];
D -- 不需要 --> J{需要透明背景吗?};
J -- 是 --> K[使用 PNG];
J -- 否 --> L{需要动画效果吗?};
L -- 是 --> M[使用 GIF 或 WebP];
L -- 否 --> N[使用 PNG];
Comments