图片格式知识文档

[toc]

一、前置概念

1.1 矢量图 vs 位图

对比维度	位图（点阵图）	矢量图
构成原理	像素阵列	数学函数
缩放效果	放大会模糊、出现锯齿	无限放大/缩小都绝对清晰
色彩表现	极其丰富，能完美呈现照片的渐变、光影、纹理	色彩过渡生硬，不适合复杂自然场景
文件大小	由分辨率和色彩深度决定，高分辨率图体积巨大	由图形复杂度决定，简单图形体积极小
编辑方式	逐像素修改，适合修图、调色、合成	整体/局部形状修改，适合 Logo、图标、插画
常见格式	JPG、PNG、WebP、AVIF、GIF、TIFF、RAW、BMP	SVG、AI、EPS、PDF
最佳场景	照片、风景图、产品图、截图、绘画作品	Logo、图标、UI 元素、品牌 VI、插画、工程图纸、字体

1.2 有损压缩 vs 无损压缩

对比维度	有损压缩	无损压缩
压缩原理	丢弃人眼难以察觉的图像信	只对数据进行重新编码，不丢弃任何原始信息
画质损失	有，且不可逆。压缩比越高，损失越明显	无，解压后和原图完全一致
压缩比	极高（JPG 可压缩到原图的 1/10）	中等（PNG 一般只能压缩到原图的 1/2–1/3）
多次保存	每次保存都会累积画质损失	无论保存多少次，画质都不会下降
常见格式	JPG、WebP（有损）、AVIF、HEIC、JPEG XL（有损）	PNG、WebP（无损）、GIF、APNG、TIFF、BMP、RAW、JPEG XL（无损）
最佳场景	网页、APP、社交媒体、日常分享	设计源文件、印刷、需后期编辑的图片、带透明背景的图

GIF / PNG-8 虽然属于无损压缩，但受限于最多 256 色，彩色照片转 GIF 会产生严重的色彩损失。所以「无损」不等于「画质好」，还要看色深是否够用。

二、位图格式 · 有损压缩

2.1 JPEG / JPG

技术要点

1992 年发布，基于 DCT（离散余弦变换），24 位真彩色
不支持透明通道，不支持动画
通过色度子采样（4:4:4 / 4:2:2 / 4:2:0）牺牲色彩分辨率换体积

优点

兼容性无敌，任何设备、任何软件、任何平台都能打开
文件小，色彩还原好

缺点

多次保存会累积画质损失（代际损失）
无透明通道，无动画，无 HDR
仅 8 位色深，渐变大面积区域容易出现色带

2026 现状

JPEG 本身没变，但编码器在进步。同样输出 .jpg，不同编码器的效率差距可达 30% 以上：

编码器	速度	同画质体积	现状
libjpeg-turbo	极快（基准）	基准	多数 Linux 发行版默认
MozJPEG	快	比 libjpeg-turbo 小 5–10%	广泛用于 Web 优化工具链
Jpegli（Google，2024）	快（与 MozJPEG 相当）	高质量档位下比 libjpeg-turbo 小最多 35%	新兴，API/ABI 兼容前两者，输出仍是标准 JPEG

Jpegli 的关键价值：它不是新格式，不需要浏览器支持。任何 JPEG 解码器都能正常打开它生成的文件。对于「平台只接受 JPEG」的场景（eBay、Etsy、老旧 CMS、印刷上传门户），这是唯一能立刻拿到收益的优化手段。

2.2 WebP

当前综合表现最均衡的位图格式，网页与 APP 配图的默认首选。

技术要点

Google 于 2010 年发布，基于 RIFF 容器
有损编码用 VP8，无损编码用 VP8L，扩展特性用 VP8X —— 三者共用同一扩展名 .webp
同时支持：有损 / 无损、Alpha 透明、动画、EXIF/XMP 元数据、ICC 色彩配置

压缩表现

对比基准	结论
无损 WebP vs PNG	小 26%；开启 8 位 Alpha 仅额外增加 22% 字节
有损 WebP vs JPEG	同画质下小 25–35%
有损透明 WebP vs PNG	同等透明效果下体积小约 3 倍
动态 WebP vs GIF	小 64% 以上，且支持 24 位真彩 + 8 位透明

优点

唯一同时实现「有损 + 无损 + 真彩动画 + Alpha 透明」的主流格式
封装开销极低（RIFF），小图也不亏
编码速度快，远快于 AVIF

缺点

IE 全系不支持（已停止支持，实际影响趋近于零）
8 位色深，不支持 HDR
高压缩比下有块效应

必须记住的一条：质量参数 0–100 只对有损模式有效。质量 100 依然是有损压缩，只是损失极小。真正的无损需要单独指定（如 cwebp -lossless），与质量参数无关。

如何判断手上这个 .webp 是有损还是无损？见 7.1。

2.3 AVIF

压缩率的当前冠军，功能最全，代价是编码很慢。

技术要点

由 AOMedia（Google、Apple、Microsoft、Netflix、Amazon 等）推动，2019 年定稿
AV1 视频编码的帧内压缩 + HEIF/ISOBMFF 容器
免专利（AOMedia 专利池， royalty-free）

压缩表现

对比基准	结论
vs JPEG	同画质小约 50%
vs WebP	再小 20–50%（低中码率区间优势最大；高质量区间 q≈90+ 差距收窄）

功能特性（WebP 与 JPEG 不具备的部分）

10 位 / 12 位色深 —— 大幅减少渐变色带
HDR 与广色域 —— BT.2020、Display P3，PQ/HLG 传递函数
Alpha 透明 —— 8/10/12 位，体积远小于 PNG
动画 —— 基于 AV1 的帧间工具
胶片颗粒合成 —— 编码前去除颗粒、解码时按模型重建，对高 ISO 照片和胶片扫描特别有效

优点：压缩率最高；色深与 HDR 支持最完善；主流 CDN 全部支持自动协商。

缺点

编码慢：比 WebP 慢 5–20 倍。一张 1200×800 照片，高质量 WebP 约 200ms，AVIF 需要 5–20 秒
解码也慢，低端移动 CPU 上尤为明显
浏览器支持略低于 WebP（约 93–95%）
容器开销相对固定 —— favicon、极小图标用它反而不划算

实操建议

编码参数：avifenc / libavif 的 CRF 范围 0–63（0 = 最高质量），网页推荐 23–32，28 是甜点（SSIM > 0.95 且比 JPEG q80 小 40–50%）
三种缓解编码慢的办法：① 重要图片只编码一次；② 构建流水线降低 effort（avifenc --speed 6）；③ 交给 CDN 按需编码（Cloudflare、Cloudinary、Imgix、Vercel 均支持）
务必在真实目标设备上测解码耗时 —— 传输省下的时间可能被解码吃回去

不适合用 AVIF 的场景

favicon 和极小图标（容器开销接近载荷本身）→ 用 PNG / ICO
纯矢量图形 → 用 SVG
编辑母版（反复重编码会累积损失）→ 保留无损源，按需导出

典型场景：图片密集型页面、HDR / 广色域内容、渐变多的图形、已接入现代图片 CDN 的站点。

2.4 HEIC / HEIF

苹果生态内的优秀拍摄格式，出了苹果生态就是个麻烦。

技术要点

HEIF（High Efficiency Image File Format）= 容器标准（MPEG 制定）
HEVC / H.265 = 里面的压缩编码
苹果把这套组合命名为 HEIC，自 iOS 11（2017）起作为 iPhone 拍照默认格式

优点

同画质下比 JPEG 小约一半
支持透明、动图（.heifs 图像序列）、深度信息、10 位色深
苹果生态内体验无缝

缺点

HEIF 容器本身是免专利的开放标准，但 HEVC 编码受专利约束，涉及 MPEG LA、Access Advance 等多个专利池。任何实现 HEVC 解码的软件都要付授权费。

Windows 上的实际处理方式

扩展	价格	作用
HEIF Image Extensions	免费	只解析容器，没有解码器所以仍打不开
HEVC Video Extensions	$0.99	提供真正的 H.265 解码器
HEVC Video Extensions from Device Manufacturer	免费	同上，但走 OEM 授权，Dell/HP/Lenovo 等品牌机通常已预装
Windows 11 22H2+	—	HEIF Image Extension 已内置

2.5 JPEG XL

技术上限最高、生态最坎坷的格式。适合存档，暂不适合生产投放。

技术要点

源于 2018 年的标准竞赛，融合了 Google 的 PIK 与 Cloudinary 的 FUIF 方案，2022 年成为 ISO 标准
支持有损 / 无损双模式、Alpha 透明、动画、渐进式解码、HDR（最高 32 位）、任意色彩空间、最大 10 亿像素分辨率
免专利，无专利池

独门绝技：JPEG 无损重压缩

可以把一个已有的 JPEG 转成 JPEG XL，体积小约 20%，并且能从 JXL 文件逐字节还原出原来的 JPEG —— 不是「看起来一样」，是同一份字节。

这个数字有两个独立来源互相印证：Cloudinary 报告「平均小约 20%，可无损还原」；Apple WebKit 博客给出同样的「平均减少 20%」。

对一个存了几百万张 JPEG 的图库来说，这是 20% 的存储削减，而且随时能撤销。这是 JPEG XL 目前最不依赖浏览器支持的现实价值 —— 注意，它是存储理由，不是分发理由。

性能对比（vs AVIF）

维度	JPEG XL	AVIF
有损压缩率（照片）	比 JPEG 小约 60%	比 JPEG 小约 50%
无损压缩	同类最佳	尚可，文件偏大
编码速度	快（2400 万像素数秒）	慢（常常 10–30 秒）
解码速度	非常快	中等
渐进式加载	支持，字节级平滑	分块式，粒度较粗
JPEG 重压缩	支持，小约 20% 且可无损还原	不支持
HDR	原生 PQ/HLG，最高 32 位	基于 AV1 HDR，最高 12 位
最大分辨率	10 亿像素	65,535 像素（8K 分块）

浏览器支持

浏览器	状态	说明
Safari 17+	默认开启	仅静态图
Chrome 145+	默认关闭	2026 年 2 月回归，需开 `enable-jxl-image-format` 标志；解码器是 Rust 重写的 `jxl-rs`
Edge 145+	默认关闭	跟随 Chromium
Firefox 152+	默认关闭	2026 年 6 月上线，需在 `about:config` 开 `image.jxl.enabled`

这段反复的历史值得知道

Chrome 91（2021）加入 flag
Chrome 110（2023.02）移除，官方理由是「生态系统兴趣不足」「增量收益不足以默认启用」
社区在 crbug.com/1178058 抗议，成为 Chromium 历史上评论最多的 issue 之一
2025.11 Chrome 团队的 Rick Byers 表态反转，但附加两个前提：内存安全的解码器 + 长期维护承诺
纯 Rust 解码器 jxl-rs 于 2025.12 合入 Chromium，Chrome 145（2026.02）随版本发布，但五个稳定版之后仍未默认开启

三、位图格式 · 无损压缩

3.1 PNG

无损位图的通用语，透明和文字锐利度的默认答案。

技术要点

PNG（Portable Network Graphics），1996 年发布第一版（W3C 推荐标准）
采用 DEFLATE 无损压缩，压缩比约 5–20%
支持 1 / 2 / 4 / 8 / 16 位深度，索引色、灰度、真彩色，可选 Alpha 通道；最高 48 位（16 位/通道）
支持渐进呈现（隔行扫描）

常见变体

变体	色深	特点	适用
PNG-8	最多 256 色	体积接近 JPEG，支持简单（1 位）透明	简单图标、扁平化设计图
PNG-24	24 位真彩	1600 万色，无 Alpha	色彩丰富的截图
PNG-32	24 位 + 8 位 Alpha	完整透明通道	Logo、UI 元素、带透明背景的图

优点：无损，透明边缘无锯齿，兼容性 100%，可反复保存不降质。

缺点：文件比 JPEG 大很多；不支持 CMYK（→ 印刷用 TIFF）；不支持动画（原生 PNG，动画见 APNG）。

2026 现状：PNG 第三版标准

PNG 在 2003 年发布第二版（同步成为 ISO/IEC 15948:2003）后停滞了 22 年，直到 2025 年 6 月 24 日 W3C 正式发布第三版推荐标准。主要新增：

新特性	说明
APNG 纳入核心规范	Mozilla 2004 年创建的动画扩展，被正式收编（详见 3.2）
cICP 块	来自 ITU-R H.273 的编码无关码点，仅 4 字节开销即可标记色彩空间，使 PNG 支持 HDR 和广色域（WCG）
Exif 支持	拍摄参数等元数据从扩展文档移入规范正文

推动力量来自HDR 字幕的需求（W3C 定时文本工作组），参与方包括 Adobe、Apple、BBC、Comcast/NBCUniversal、Google、MovieLabs。规范发布时 Chrome、Safari、Firefox、iOS、macOS、Photoshop、DaVinci Resolve、Avid Media Composer 已支持新特性。

下一版（第四版）计划改进 HDR/SDR 互操作性，第五版计划改进压缩率。

典型场景：图标、Logo、UI 元素、带透明背景的图、文字截图、需要无损的中间产物。

3.2 APNG

GIF 的画质升级版，2025 年终于「转正」进了 PNG 标准。

技术要点

由 Mozilla 的 Vladimir Vukicevic 与 Stuart Parmenter 在 2004–2005 年创建
与 PNG 完全兼容：不支持 APNG 的软件只会显示第一帧（当作静态 PNG）
24 位真彩 + 8 位 Alpha，画质远超 GIF

一段曲折的标准化历史

2007 年 Firefox 3 率先支持
同年 PNG 开发组拒绝纳入 APNG，理由是「它不是独立格式」且「PNG 应该保持为静态格式」
此后两次重启讨论均失败
但浏览器一个接一个实现了它（Safari、Chrome、Edge……）
2025 年 PNG 第三版正式收编 APNG，且规范内容与 Mozilla 的文档完全一致，保证与十多年来已部署的实现对齐

浏览器支持（2026）

浏览器	起始版本
Chrome / Edge	59+ / 79+
Firefox	3+
Safari	8+
iOS / macOS	系统级支持（iOS 9+、macOS 10.11+），iMessage 动态贴纸即用此格式

优点：无损、真彩、完整 Alpha，无 GIF 的色带与锯齿问题。

缺点：兼容性略逊于静态 PNG；体积通常大于同等效果的有损动图格式。

典型场景：高质量小动画、网页动效、需要透明背景的动图。

3.3 GIF

技术上早已过时，但靠生态惯性活成了表情包的事实标准。

技术要点

最多 256 色（调色板索引），LZW 无损压缩
支持帧动画、1 位透明（只有全透明/全不透明，没有半透明）
1987 年发布，LZW 曾受 Unisys 专利困扰（专利已于 2003–2004 年到期）

优点

兼容性无敌，任何地方都能播
动画制作简单，无需播放器

缺点

256 色限制导致色彩断层明显
1 位透明导致透明边缘锯齿
同样时长和画幅下文件最大

典型场景：简单表情包、小尺寸低帧率动图、需要塞进老旧渠道的动图。新建项目请优先考虑动态 WebP 或 APNG。

3.4 TIFF / TIF

印刷与归档的行业基石，专业领域的「无损母版」。

技术要点

TIFF（Tagged Image File Format），1986 年由 Aldus 发布（后随 Aldus 并入 Adobe）
「Tagged」指其标签式结构 —— 用一系列标签字段描述尺寸、色彩空间、压缩方式和像素数据，因此极度灵活可扩展
相关标准：ISO 12639（TIFF/IT，印刷行业）

压缩方式（全部为无损，除 JPEG-in-TIFF）

方式	特点
不压缩	最大兼容性，体积最大
LZW	无损，体积降 50–60%，通用推荐
ZIP / Deflate	无损，压缩率略优于 LZW（60–70%），兼容性稍差、更慢
PackBits	简单 RLE，快但压缩率极低
CCITT G3 / G4	1 位黑白文档扫描优化（传真标准）
JPEG-in-TIFF	有损，专业流程中很少用

色彩与位深（TIFF 最强的部分）

位深：1 / 8 / 16 位每通道，以及 32 位浮点（HDR 与科研成像）
色彩空间：RGB、CMYK、CIE Lab、灰度、YCbCr、专色
CMYK 支持是印刷刚需 —— PNG 和 JPEG 都只有 RGB，这是 TIFF 无法被替代的核心原因
支持 Alpha 通道、多图层、EXIF/IPTC/XMP 元数据、ICC 色彩配置

多页 TIFF

一个文件通过多个 IFD（图像文件目录）容纳多张图像。这是扫描文档归档、传真、显微图像栈、时间序列数据、GIS 图层的标准做法 —— 除了 PDF，没有第二个常见图像格式把多页做得这么好。

容量限制

标准 TIFF 6.0：32 位偏移，4 GB 上限
BigTIFF：64 位偏移，理论可达 18 EB

字节序：文件头前两字节标识 —— MM（大端 / Motorola）或 II（小端 / Intel），现代软件都能自动处理。

优点：无损；支持所有色彩空间；16/32 位高精度；多页；专业软件全支持；免专利。

缺点：体积巨大（300 DPI 整页无压缩 TIFF 可达 100MB–1GB）；浏览器完全不支持；规范复杂导致不同实现之间偶发兼容问题；读写慢。

典型场景：印刷出版（300 DPI CMYK）、扫描件、专业摄影存档、医学影像（16 位灰度保留 X 光/CT/MRI 完整动态范围）、GIS（GeoTIFF 存地理坐标）、科研 32 位浮点成像、博物馆/图书馆数字化。

3.5 BMP

Windows 原生无压缩位图，已基本淘汰。

技术要点

不压缩或仅 RLE 压缩，结构极其简单
完全无损，但文件超级大

2026 现状：几乎只出现在老旧系统、某些硬件/嵌入式设备的固件截图、以及教学示例中。日常使用没有任何理由选择它。

唯一还值得记住的点：ICO 容器内部的图像传统上就是 BMP 格式（现代 ICO 已可内嵌 PNG）。

四、位图格式 · 原始与工程格式

4.1 RAW

相机传感器的原始数据流，后期空间最大。

技术要点

记录传感器直接输出的数据，未经机内处理（无锐化、无色彩校正、无降噪）
各厂商私有格式：.CR2/.CR3（Canon）、.NEF（Nikon）、.ARW（Sony）、.RAF（Fujifilm）、.ORF（Olympus）……
.DNG 是 Adobe 推动的开放归档格式，适合长期保存（避免厂商格式未来无法读取）

优点：后期调整空间极大（曝光、白平衡、对比度等），且调整不损伤原始数据。

缺点：文件巨大；必须用专业软件处理（Lightroom、Capture One、Darktable 等）；不能直接分发。

典型流程：RAW（拍摄）→ Lightroom/Photoshop（编辑）→ TIFF（印刷 / 归档）或 JPEG（网络分发）。

4.2 PSD

Photoshop 的分层工程文件，设计过程的标准位图源格式。

技术要点

保留图层、蒙版、通道、智能对象、调整图层、文字图层等全部编辑信息
是「可再编辑」的中间产物，不是交付格式

注意

PSD 有 2 GB 文件大小与 30,000 像素边长上限；超大型文档要用 PSB（Large Document Format）
交付前请导出为 WebP / PNG / JPEG，不要直接发 PSD

典型场景：设计过程中的源文件保留。

五、矢量图格式

5.1 SVG

网页矢量的绝对首选，也是一个「活」的格式（可用 CSS 和 JS 控制）。

技术要点

SVG（Scalable Vector Graphics），基于 XML 的纯文本格式
可内联进 HTML、用 CSS 控制样式、用 JS 操作 DOM
支持滤镜、渐变、图案、路径、文本、裁剪与遮罩
无障碍友好：支持 tabindex、ARIA 属性（role、aria-label）

优点

无限缩放不失真，一个文件覆盖 16px 到 192px 所有尺寸
体积极小（典型 SVG favicon 仅 300–800 字节）
纯文本，可用任何编辑器修改，可被 gzip/brotli 高效压缩
支持深色模式适配（内嵌 @media (prefers-color-scheme: dark)）

缺点

不适合照片和写实图像（矢量路径无法表达连续色调）
复杂插画的节点数会拖慢渲染
XML 解析有安全考量（外部实体引用等，内联来自不可信来源的 SVG 需谨慎）

// 检测 CSS geometry 属性（x, y, r 等）支持
function supportsCSSGeometry() {
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  return 'x' in rect.style;
}
// 检测 paint-order
function supportsPaintOrder() {
  return CSS.supports('paint-order', 'stroke fill');
}

编写规范的变化

变化	说明
`version` 属性	浏览器从未强制检查，可安全移除
`baseProfile` 属性	移动端 profile（Tiny/Basic）已过时，可移除
`xml:space`	已废弃，改用 CSS `white-space`
XLink 命名空间	已弃用 `xlink:href`，改用 `href`；过渡期建议两者都写
SMIL 动画	已从 SVG 2 移除（Chrome 曾宣布弃用），改用 CSS Animations / Web Animations API
新增	CSS 几何属性、`paint-order`、`isPointInFill()` / `isPointInStroke()`、`<use>` 的 Shadow DOM

已知坑：

iOS「添加到主屏幕」读的是 apple-touch-icon PNG，SVG 到不了主屏幕
Safari 固定标签页需要专有的 rel="mask-icon"
favicon 内的动画不会播放（浏览器只渲染第一帧）
prefers-color-scheme 在 Chrome/Edge 生效，Firefox 不生效
Chromium 在没有 sizes="any" 时会同时下载 ICO 和 SVG

稳妥做法：/favicon.ico（16/32/48）+ PNG + 可选 SVG，全部写在 <head> 里。

典型场景：网页图标、Logo、插画、数据可视化、图标字体替代方案、favicon。

5.2 AI

Adobe Illustrator 原生矢量源文件，品牌 VI 与印刷排版的生产格式。

要点

保留图层、画板、路径、渐变网格、专色等全部编辑信息
矢量设计的工作母版，交付时另存 SVG / EPS / PDF
需要 Illustrator 或兼容软件（Affinity Designer、Inkscape 可部分读写）打开

典型场景：专业矢量设计、印刷排版、品牌 VI 系统。

5.3 EPS

PostScript 时代的通用矢量交换格式，正在被 PDF/AI 取代但尚未退场。

要点

Encapsulated PostScript，用 PostScript 语言描述图形，跨平台
可同时包含矢量和位图，常内嵌一个低分辨率预览图（供排版软件显示）
部分老式印刷流程、刻字/切割软件、老版本设计软件仍要求 EPS

注意

EPS 本质上是 PostScript 程序，具有可执行性，打开来路不明的 EPS 存在安全风险
新项目优先用 AI 或 PDF 交换

典型场景：印刷、出版、与老旧设计软件交换文件。

5.4 PDF

不是图像格式，而是能同时装下矢量、位图、字体的万能容器。

要点

由 Adobe 创建，现为 ISO 32000 开放标准
单个 PDF 内可同时包含：矢量文字、矢量路径、嵌入位图、字体、交互表单、注释
绝大多数 PDF 是混合的（比如书籍：矢量文字 + 位图插图）

在图像工作流中的角色

印刷输出的标准交付格式（PDF/X-1a、PDF/X-4 等子标准）
文档分享、电子画册
可作为矢/位混排的容器（区别于 EPS 之处在于它更现代、更通用、支持更多特性）

如何判断一个 PDF 里是矢量还是位图？见 7.2。

六、图标与专用容器

6.1 ICO

Windows 图标的多分辨率容器，网站的 favicon 根目录默认项。

技术要点

一个 ICO 文件内含多张不同尺寸的图（16×16、32×32、48×48、256×256），由系统或浏览器按场景挑选
内部结构：一个目录区记录每个尺寸的位置、色深和偏移，图像数据可以是 BMP（传统，最高 32 位 RGBA）或 PNG（现代，压缩更好）

2026 实践建议

虽然 SVG favicon 已被主流浏览器支持，生产站点仍建议全套都给：

<!-- 根目录默认请求，兼容一切老环境 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- 现代浏览器的首选 -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<!-- PNG 兜底（Safari 18 及更早、iOS 主屏） -->
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Safari 固定标签页专用 -->
<link rel="mask-icon" href="/mask-icon.svg" color="#000000">

典型场景：程序图标、网站 favicon。

6.2 ICNS

macOS 应用图标容器，ICO 的苹果对应物。

要点

Apple 的图标格式，单个文件内包含从 16×16 到 1024×1024（含 @2x）的多种尺寸
支持比 ICO 更高的分辨率和更多尺寸档位
仅用于 macOS 应用 bundle，与 Web 无关

典型场景：macOS 应用图标（.app 包内的 Icon 资源）。

七、格式识别与检测

7.1 判断 WebP 是有损还是无损

核心原理

WebP 的有损和无损是两套完全独立的编码算法，共用同一个文件容器：

有损 WebP：基于 VP8 视频编码（和 WebM 视频同源）
无损 WebP：基于 VP8L 编码（L = Lossless）
区别直接写在文件头里，这是所有识别方法的基础

方法一：命令行 `webpinfo`

谷歌官方工具，直接解析文件内部结构。

安装

Windows / macOS / Linux：libwebp 工具包
Ubuntu / Debian：sudo apt install webp
macOS（Homebrew）：brew install webp

使用与判读

1	webpinfo 你的图片.webp

Chunk VP8 at offset → 有损压缩
Chunk VP8L at offset → 无损压缩
Chunk VP8X at offset → 扩展格式（继续往下看，后面会跟着 VP8 或 VP8L）

方法二：查看文件头

WebP 文件前 16 个字节包含编码类型信息：

# Linux / macOS
xxd -l 16 你的图片.webp

# Windows（PowerShell）
Format-Hex -Path 你的图片.webp -Count 16

第 12–15 字节（ASCII）	编码类型
`VP8`	有损压缩
`VP8L`	无损压缩
`VP8X`	扩展格式（需进一步解析）

示例

1 2	00000000: 5249 4646 7c02 0000 5745 4250 5650 3820 RIFF\|...WEBPVP8 → 这是有损 WebP

方法三：图形化工具

工具	平台	操作步骤	结果判读
XnView MP	跨平台免费	打开图片 → 右键 → 属性 → 详细信息 → 「压缩」字段	`VP8` → 有损；`VP8L` → 无损
GIMP	跨平台免费	打开图片 → 图像 → 图像属性 → 高级	查看「压缩」信息
IrfanView	Windows 免费	打开图片 → 按 `I` 键	「格式」显示 `WebP (VP8)` 或 `WebP (VP8L)`

方法四：文件大小 + 画质

特征	有损 WebP	无损 WebP
同图体积	小（通常是无损的 1/3–1/5）	大（比 PNG 小 26% 左右）
画质表现	高压缩比下有块效应、模糊	完全清晰，无失真
文字 / 线条	边缘可能发虚、有锯齿	边缘锐利，和原图一致
渐变 / 照片	表现好，人眼难察觉损失	体积巨大，没必要用

快速测试：把 WebP 另存为 PNG，如果文件变大很多，基本就是有损的；如果大小差不多，就是无损的。

7.2 区分 PDF 中的矢量元素与位图元素

核心原理

PDF 是一个「万能容器」，不是单一格式。它可以同时包含：

矢量元素：文字、线条、形状、路径
位图元素：嵌入的图片、扫描件
混合元素：绝大多数 PDF 都是混合的

关键结论：我们区分的是 PDF 中的单个元素，而不是整个文件。

方法一：放大查看法

用任意 PDF 阅读器打开文件
放大
分别观察文字、线条和图片的边缘

放大后表现	元素类型
边缘始终平滑锐利，没有任何锯齿	矢量元素
边缘出现明显的马赛克、方块或模糊	位图元素

方法二：文本选择法

拖动鼠标尝试选中一段文字
能选中高亮、复制粘贴到记事本正常显示 → 矢量文字
只能选中整个页面，或复制后是空白/乱码 → 位图文字（扫描件）

特殊情况：双层 PDF

扫描件经 OCR 处理后，会在底层位图上叠加一层不可见的矢量文字
能复制文字，但放大后仍然有锯齿
判断：复制文字后放大到 800%，看文字边缘是否有锯齿

方法三：专业软件检测

Adobe Acrobat Pro

方式 A：预检工具

打开 PDF → 左侧工具栏 → 印刷制作 → 预检
搜索框输入「列出页面资源」→ 点击「分析」
结果分类：字体（矢量文字，显示字体名）、矢量图形（线条/形状/路径）、图像（位图，显示分辨率、大小、颜色模式）

方式 B：输出预览工具

工具 → 印刷制作 → 输出预览
「预览」下拉菜单选择「对象检查器」
点击页面任意元素，显示该元素的详细类型

方法四：命令行 `mutool` 检测

安装

Ubuntu / Debian：sudo apt install mupdf-tools
macOS（Homebrew）：brew install mupdf
Windows：MuPDF 官方版

使用

# 查看所有元素类型
mutool info -r 你的文件.pdf

# 只列出所有位图图片
mutool info -I 你的文件.pdf

# 只列出所有矢量字体
mutool info -F 你的文件.pdf

输出示例

page 1:
  mediabox: 0 0 595 842
  resources:
    font F1: Helvetica-Bold (矢量字体)
    font F2: Helvetica (矢量字体)
    image I1: 800x600 8-bit RGB (位图图片)
  contents: 3 streams

批量检测脚本

for file in *.pdf; do
  if mutool info -I "$file" | grep -q "image"; then
    echo "$file 包含位图元素"
  else
    echo "$file 纯矢量 PDF"
  fi
done

7.3 检测工具速查表

工具	检测对象	平台	费用	准确度	特点
`webpinfo`	WebP 有损/无损	全平台	免费	★★★★★	谷歌官方，直接解析文件结构
`xxd` / `Format-Hex`	WebP 有损/无损	Linux/macOS / Win	免费（系统自带）	★★★★★	读文件头，零安装
XnView MP	WebP 有损/无损	跨平台	免费	★★★★☆	图形界面，操作最省事
GIMP	WebP 有损/无损	跨平台	免费	★★★★☆	顺带可编辑
IrfanView	WebP 有损/无损	Windows	免费	★★★★☆	快捷键 `I` 秒看属性
Acrobat Pro 预检	PDF 矢量/位图	跨平台	付费	★★★★★	印刷行业标准，逐元素分类
Inkscape	PDF 矢量/位图	跨平台	免费	★★★★☆	对象面板 + 可编辑矢量
`mutool`	PDF 矢量/位图	全平台	免费	★★★★★	命令行，适合批量脚本

八、对比总结

8.1 全格式速查总表

格式	类型	压缩	透明	动画	HDR	色深	浏览器支持	核心定位
JPEG / JPG	位图	有损	❌	❌	❌	8-bit	100%	万能兜底，照片分发
WebP	位图	有损+无损	✅	✅	❌	8-bit	~97–98%	网页首选，综合最均衡
AVIF	位图	有损+无损	✅	✅	✅	10/12-bit	~93–95%	压缩率冠军，HDR
HEIC / HEIF	位图	有损	✅	✅	✅	10-bit	仅 Safari	iPhone 拍摄存储
JPEG XL	位图	有损+无损	✅	✅	✅	最高 32-bit	~12–15%（Safari 默认）	归档，JPEG 无损瘦身
PNG	位图	无损	✅	✅（APNG）	✅（PNG 3.0）	最高 16-bit/通道	100%	透明与文字锐利度
APNG	位图	无损	✅	✅	❌	24-bit	~95%	高质量动图
GIF	位图	无损	1-bit	✅	❌	8-bit（256 色）	100%	表情包，生态惯性
TIFF / TIF	位图	无损（可选有损）	✅	❌	✅	最高 32-bit 浮点	❌	印刷、归档、科研
BMP	位图	无	❌	❌	❌	最高 32-bit	部分	已淘汰
RAW	位图	原始	❌	❌	✅	传感器原始	❌	摄影后期母版
PSD	位图	工程	✅	❌	✅	最高 32-bit	❌	Photoshop 源文件
SVG	矢量	—	✅	✅（CSS）	—	—	100%	网页矢量首选
AI	矢量	工程	✅	❌	—	—	❌	Illustrator 源文件
EPS	矢量	工程	✅	❌	—	—	❌	印刷交换（遗留）
PDF	容器	混合	✅	✅	✅	混合	内置	文档与印刷交付
ICO	容器	混合	✅	❌	❌	最高 32-bit	100%	favicon、程序图标
ICNS	容器	混合	✅	❌	❌	高	❌	macOS 应用图标

8.2 压缩效率与编码成本

格式	同画质 vs JPEG	编码速度	解码速度	专利
JPEG（传统编码器）	基准	极快	极快	已过期
JPEG（Jpegli）	高质量档小最多 35%	快	极快	已过期
WebP	小 25–35%	快	快	免专利
AVIF	小约 50%	慢（5–20× WebP）	中等	免专利（AV1 池）
JPEG XL	小 30–60%	快	非常快	免专利
HEIC	小约 50%	中等	中等	HEVC 需付费授权
PNG	更大（无损）	快	快	免专利
TIFF（LZW）	大得多（无损）	慢	慢	免专利

一句话读表：压缩率排序大致是 JPEG XL ≈ AVIF > HEIC > WebP > JPEG > PNG > TIFF；编码成本排序反过来大致是 JPEG ≈ WebP < JPEG XL < HEIC << AVIF。

8.3 动画格式专项对比

格式	色彩	透明	体积	浏览器支持	建议
GIF	256 色	1-bit（有锯齿）	基准（最大）	100%	仅表情包与遗留渠道
APNG	24-bit 真彩	8-bit Alpha	中等	~95%	需要无损/透明动图时
动态 WebP	24-bit 真彩	8-bit Alpha	比 GIF 小 64%+	~97–98%	通用首选
动态 AVIF	10/12-bit	全 Alpha	最小（可再小 90%+）	~93–95%	追求极致体积，接受编码慢

注意：动态 JPEG XL 在 Safari 上不支持

8.4 按场景选型

使用场景	首选	备选 / 说明
网页 / APP 配图	WebP	极致压缩用 AVIF；兼容兜底 JPEG / PNG；用 `<picture>` 做渐进增强
照片存储（手机）	HEIC	跨平台分享前转 JPEG / WebP
照片存储（电脑）	JPEG	用 Jpegli 等现代编码器可再省最多 35%
专业摄影存档	RAW + JPEG	编辑后导出 TIFF 存档；海量 JPEG 库可用 JPEG XL 无损瘦 20%
图标 / Logo / UI	SVG	必须出位图时用 PNG-32
favicon	ICO + PNG + SVG 全套	Safari 26 才支持 SVG favicon，务必留 PNG/ICO 兜底
动画	动态 WebP	高质量透明用 APNG；极致体积用动态 AVIF；表情包用 GIF
印刷 / 出版	TIFF（CMYK）或 PDF	PNG/JPEG 不支持 CMYK，交付前确认色彩模式
长期归档	TIFF（LZW/ZIP）或 PNG	免专利、无损、通用；相机原始档用 DNG
设计过程源文件	PSD（位图）/ AI（矢量）	超大文档用 PSB；交付时另存
需反复编辑的中间稿	PNG / TIFF	绝不反复保存 JPEG

8.5 决策流程

先判断内容类型
│
├─ 需要无限放大不失真（Logo / 图标 / 字体 / 工程图 / 数据可视化）
│     └─ SVG（网页）/ AI（源文件）/ EPS（老式印刷交换）
│
├─ 需要动画
│     └─ 动态 WebP（通用）/ APNG（无损+透明）/ 动态 AVIF（极致体积）/ GIF（表情包）
│
└─ 照片、截图等连续色调内容 → 位图，继续判断
      │
      ├─ 交付印刷（需 CMYK / 高 bit 深度）
      │     └─ TIFF 或 PDF
      │
      ├─ 需要长期归档 / 反复编辑
      │     └─ TIFF / PNG；已有 JPEG 库 → JPEG XL 无损瘦身 20%
      │
      ├─ 需要透明背景 / 文字线条锐利
      │     └─ PNG（通用）/ WebP 无损（网页）/ APNG（动图）
      │
      ├─ 网页分发、追求体积
      │     └─ WebP（首选）→ AVIF（极致）→ JPEG（兜底）
      │        用 <picture> 组合：AVIF → WebP → JPEG
      │
      └─ 平台锁定只能交 JPEG
            └─ 换用 Jpegli / MozJPEG 编码器，最多再省 35%

渐进增强的标准写法

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="描述" width="1200" height="675" loading="lazy" decoding="async">
</picture>

浏览器按 type 自上而下挑第一个支持的格式，不会重复下载。记得写 width / height 防止布局偏移（CLS）。

本文借助AI整理而成。

欢迎来到我的博客!

图片格式知识文档

一、前置概念

1.1 矢量图 vs 位图

1.2 有损压缩 vs 无损压缩

二、位图格式 · 有损压缩

2.1 JPEG / JPG

2.2 WebP

2.3 AVIF

2.4 HEIC / HEIF

2.5 JPEG XL

三、位图格式 · 无损压缩

3.1 PNG

3.2 APNG

3.3 GIF

3.4 TIFF / TIF

3.5 BMP

四、位图格式 · 原始与工程格式

4.1 RAW

4.2 PSD

五、矢量图格式

5.1 SVG

5.2 AI

5.3 EPS

5.4 PDF

六、图标与专用容器

6.1 ICO

6.2 ICNS

七、格式识别与检测

7.1 判断 WebP 是有损还是无损

核心原理

方法一：命令行 webpinfo

方法二：查看文件头

方法三：图形化工具

方法四：文件大小 + 画质

7.2 区分 PDF 中的矢量元素与位图元素

核心原理

方法一：放大查看法

方法二：文本选择法

方法三：专业软件检测

方法四：命令行 mutool 检测

7.3 检测工具速查表

八、对比总结

8.1 全格式速查总表

8.2 压缩效率与编码成本

8.3 动画格式专项对比

8.4 按场景选型

8.5 决策流程

方法一：命令行 `webpinfo`

方法四：命令行 `mutool` 检测