用了几十年电脑，你真的知道这些图片格式该怎么用

👁 420

起因：写邮箱别名那篇被自己点醒了

前阵子写邮箱别名那篇文章的时候，做特色图我顺手用了 SVG——结果一个只有 5KB 的 SVG，效果比我以前丢 130KB 的 PNG 还清晰。

那一刻我突然意识到：我自己博客上一直在乱用图片格式。

• 截图随手 PNG，几百 KB 一张
• 照片导出全 JPG，没想过 WebP
• 流程图也是 PNG，每改一次得重新画
• AVIF / JXL / HEIC 听过名字，从来没认真用过

这篇就是我自己排查了一圈、把 7 种主流格式横评一遍之后的笔记。别人怎么用我不管，我就讲对一个个人博客该怎么选。

简单粗暴一句话总结

要是你没耐心看完，直接收走这张图：

下面是详细对比。

7 种格式按出生年份排排坐

1987  GIF    ─ 256 色 / 动图鼻祖 / 现在该退休了
1992  JPG    ─ 照片祖宗 / 全网兼容 / 不支持透明
1996  PNG    ─ 无损 / 支持透明 / 文件偏大
2001  SVG    ─ 矢量 / XML 文本 / 图表/Logo 神器
2010  WebP   ─ Google 出 / 现代默认 / 几乎全兼容
2015  HEIC   ─ 苹果出 / iPhone 默认 / 网页几乎不能用
2019  AVIF   ─ AV1 视频抽帧 / 压缩之王 / 编解码慢
2021  JXL    ─ JPEG XL / 真正继任者 / 浏览器支持烂尾中

注意一件事：位图阵营（JPG/PNG/GIF/WebP/AVIF/HEIC/JXL）和矢量阵营（SVG）逻辑完全不一样——位图存的是像素方阵，矢量存的是「怎么画」的描述指令。SVG 不在压缩比赛里，它解决的是另一个维度的问题。

一张图实测：同样画质下文件大小

我拿了 3 张代表性图片实测（1920×1080 风景照、UI 截图、信息图）：

格式	风景照 (照片)	UI 截图	信息图 (图表)	透明通道	浏览器支持
PNG 无损	3.2 MB	480 KB	220 KB	✅	100%
JPG q85	380 KB	不适用	不适用	❌	100%
GIF	不适用	不适用	不适用（256色限制）	✅（1-bit）	100%
WebP q85	240 KB	180 KB	80 KB	✅	96%（IE 除外）
AVIF q85	110 KB	110 KB	50 KB	✅	92%（Safari 16+ 才支持）
JXL q85	95 KB	90 KB	40 KB	✅	⚠️ 5%（Chrome 暂废、Safari 17+）
HEIC q85	130 KB	不适用	不适用	✅	❌ 网页不支持，得先转
SVG	不适用	不适用	5-15 KB	✅（天然）	100%

数据来源：我自己用 magick convert / cwebp / avifenc / cjxl 实测。

---

顺带提一笔——这些我没列进对比的

写之前我列了一份「看过没认真用过」的格式清单，最后筛掉了，只在这里点一下名，免得有读者说我漏：

• BMP（1990，微软）—— 没压缩的位图老古董，文件巨大。唯一还活着的场景是 Windows 系统图标和一些工业软件输出。
• TIFF（1986）—— 印刷出版业标准，扫描仪 / 专业相机原片用，网页基本用不上。
• PSD（1990，Photoshop）—— Adobe 源文件，带图层 / 蒙版 / 路径。它只是工程文件，最终还是要导出 JPG/PNG/WebP。
• RAW（CR2 / NEF / ARW…）—— 各厂相机底片格式，得用 Lightroom / Capture One 后期处理后导出。
• ICO—— 网页 favicon 专用，本质是多分辨率 PNG 容器。
• JP2 / JPEG 2000—— 比 JPG 好但没人用，等于 JXL 的「过去式」。
• DDS / KTX—— 游戏纹理压缩格式，跟 web 没关系。
• PDF—— 严格说不算图片格式，但很多人确实用它发图（特别是论文截图、扫描合同）。

它们要么只在专业链路里（PSD/RAW/TIFF）、要么已经退役（BMP/JP2）、要么用途太窄（ICO/DDS）。博客作者你这辈子大概率不会主动选它们。

一个个讲，把人话讲清楚

1. JPG（1992）——照片祖宗，没死也不会死

最老的位图格式之一，几乎所有设备、所有浏览器、所有相机都默认支持。

• ✅ 照片压缩之王（有损压缩——丢掉人眼不敏感的信息换体积）
• ✅ 全兼容，老板的 Windows XP 都能开
• ❌ 不支持透明（截图带透明背景的就别用）
• ❌ 不支持动画
• ❌ 多次编辑保存会叠加压缩损失（每存一次画质都变烂）

我现在还用 JPG 吗？几乎不用，照片我全转 WebP 了，省 30-50%。

2. GIF（1987）——该退休了

唯一还有人用的原因就是动图。但它有个致命缺陷：

• ❌ 只能 256 色——所以你看到的 GIF 动图永远色彩贫瘠
• ❌ 文件大得离谱——同一段动图，WebP 动图只要 GIF 的 1/3，MP4 只要 1/10
• ❌ 没有声音、不支持透明渐变

我的建议：全部用 MP4 或 WebM 替代。微信现在也支持发短视频代替动图，Telegram 的 sticker 也都是 WebM。

唯一保留 GIF 的场景：邮件签名里的小动图（部分邮件客户端不支持 MP4 内嵌）。

3. PNG（1996）——截图 / 图表 / 带透明背景的图

PNG 的最大优势是无损——这是它和 JPG 最核心的区别。

• ✅ 无损压缩——多次编辑保存画质不掉
• ✅ 支持透明通道（甚至支持半透明渐变）
• ✅ 全兼容
• ❌ 文件比 JPG 大 3-10 倍（同样照片）
• ❌ 不支持动画

我以前的用法：截图、信息图、Logo 全 PNG——现在这部分全转 WebP 了，只在「需要 PNG 才能打开的老旧软件」场景保留。

4. SVG（2001）——图表/Logo/图标，没有对手

这次让我开窍的格式。SVG 不是位图——它是一段 XML 文本，描述「怎么画」。

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

这段 60 个字符的代码，渲染出来是一个任意大小都不糊的红色圆——4K 屏看也清晰，手机屏看也清晰。

• ✅ 文件极小——同一张信息图，PNG 130KB，SVG 5KB
• ✅ 无限缩放无失真——手机 / iPad / 4K 屏一份图通吃
• ✅ 可程序化修改——改颜色 / 文字 / 位置直接编辑文本，1 秒搞定
• ✅ 全浏览器兼容——古董 IE9 都支持
• ❌ 不适合照片（每个像素都要描述，反而几 MB 起步）
• ❌ WordPress 默认禁止上传 .svg 文件（怕 XSS 攻击）——但可以内联到 HTML 里绕开

适合的内容： – Logo、品牌图 – 流程图、架构图、信息图 – 图标（icon） – 数据可视化图表

我现在博客的实操：所有自己画的图表/流程图/特色图，全部 SVG inline 嵌入，文件小到忽略不计，改图秒级。

5. WebP（2010）——Google 出的现代默认

Google 2010 年推的，本质是「把视频编解码技术 VP8/VP9 用到图片上」。

• ✅ 同等画质比 JPG 小 25-35%，比 PNG 小 25-50%
• ✅ 支持透明通道（PNG 的活它能干）
• ✅ 支持动画（GIF 的活它能干）
• ✅ 支持有损 + 无损两种模式
• ✅ 96% 浏览器支持——iOS 14+、Android 4.4+、所有现代桌面浏览器
• ❌ IE 不支持（但 IE 已经死了）
• ❌ 老一辈用户的电脑可能看不到

WebP 是现在博客 / 网站的「最佳性价比」——压缩好、兼容好、工具链成熟。我所有刷机文章的截图都先 magick xx.png -strip -quality 82 xx.webp，一张 1MB 的截图 → 32KB 的 WebP，省 30 倍。

6. AVIF（2019）——压缩之王，但门槛高

来自 AV1 视频编解码器（Google/Netflix/Amazon 那帮人 2018 年搞的开源标准）。抽视频的单帧出来当图片。

• ✅ 压缩率全方位碾压——同画质比 WebP 再小 50%
• ✅ 支持 10-bit/12-bit 色深（HDR 友好）
• ✅ 支持透明、动画、无损
• ❌ 编码慢 5-10 倍——你导出一张 AVIF 比 WebP 累得多
• ❌ 解码慢 2-3 倍——浏览器渲染稍微慢一点
• ❌ Safari 16+ 才支持（2022 年 9 月），老 iPhone 用户看不到
• ❌ 工具链没 WebP 那么开箱即用

对个人博客来说：杀鸡用牛刀。流量没大到那个程度，WebP 完全够。要用就得配 <picture> 标签搞 AVIF + WebP + JPG 三层兜底，工作量翻倍——不值。

真正适合的场景：大流量电商 / 视频站 / 设计师作品集 / Netflix 这种级别的应用。

7. HEIC（2015）——苹果出的，网页几乎用不了

iPhone 默认拍的照片就是 HEIC（除非你在设置里改成「兼容性」JPEG）。

• ✅ 压缩率好（接近 AVIF）
• ✅ 苹果设备原生支持
• ❌ 网页几乎不支持——Safari 都不能直接显示 HEIC
• ❌ Windows / 安卓 / Linux 默认不能开
• ❌ 工具链碎片化

最大的坑：你 iPhone 拍照发给安卓朋友 / 上传到博客 → 对方打不开。

我的处理方式：iPhone 进 godsun.pro 的照片先在 iPhone 上转成 JPEG（设置 → 相机 → 格式 → 兼容性），或者下载下来 magick xxx.heic xxx.webp 一把转完。博客上永远不发原生 HEIC。

8. JXL / JPEG XL（2021）——最委屈的格式

JPEG 委员会自己出的「下一代 JPEG」，技术上所有人都说它比 AVIF 还好：

• ✅ 压缩率超过 AVIF
• ✅ 编解码比 AVIF 快 3-5 倍
• ✅ 支持「无损从旧 JPEG 转过来」——现有 JPG 直接转 JXL 不掉画质还小 20%
• ✅ 支持渐进式加载（边下边显示）
• ❌ Chrome 在 2022 年突然撤销支持——网传是为了保护自家 WebP/AVIF 生态
• ❌ Safari 17+ 才支持（2023）
• ❌ Firefox 还在 nightly 阶段
• ❌ 工具链 / CMS 几乎没原生支持

现状：技术明珠，商业弃子。等浏览器统一支持估计还要 2-3 年。博客上别碰。

我自己 godsun.pro 的实操组合

讲了这么多，下面是我自己博客的真实策略——给你参考：

内容类型	我用什么	为什么
特色图 / 信息图 / 流程图	SVG inline 嵌入	极小 + 任意改 + 永远清晰
Logo / 图标	SVG（外部 URL）	同上
实物照片	WebP（从原 JPG 转）	比 JPG 小 30%，画质几乎无差
UI 截图	WebP（从原 PNG 转）	比 PNG 小 5-10 倍
小图（缩略图、头像）	WebP	移动端友好
动图	MP4（嵌 video 标签）	比 GIF 小 10 倍，还能控制播放
emoji 图标	直接用 Unicode 字符	📦 ⚠️ 🛡️——不要图
二维码	PNG（小图不值得折腾）	唯一例外

核心一句话：SVG + WebP 二人组，吃下 95% 场景。

三个常见误区，别再犯了

误区 1：「PNG 永远比 JPG 好，反正无损」

错。照片用 PNG = 文件膨胀 10 倍，画质你肉眼根本看不出差别。

PNG 的「无损」优势只在截图 / 图表 / 含透明背景这些色块明显的内容上有效。风景照、人物照、复杂渐变场景用 PNG 就是浪费带宽。

正确用法：照片永远 JPG / WebP，截图永远 PNG / WebP。

误区 2：「GIF 还是动图最佳选择」

更大的错。GIF 在 2020 年代已经是 obsolete 技术：

• 同样动图：GIF 5MB → WebP 动图 1.5MB → MP4 500KB
• GIF 256 色限制让所有动图都「廉价感」
• 移动端流量党 / 老人机用户看 GIF 加载慢死

直接换 MP4 或 WebM，用 <video autoplay loop muted playsinline> 嵌入，自动循环播放，跟 GIF 体验一样但小 10 倍。

误区 3：「用最新的 AVIF 就完事」

也错。AVIF 不是 silver bullet——对个人博客来说：

• 编码累（你服务器/本地导出 AVIF 慢 5-10 倍）
• 解码累（用户手机解码也慢，老机型甚至卡）
• 兼容性还在追赶（iOS 16+ 才支持）
• 必须配 <picture> 三层兜底（AVIF + WebP + JPG），写法变复杂

WebP 是 2020 年代的「足够好」，不要为了追新折腾用户。

转换命令速查（我经常用的几条）

放最后给你抄走，省得满网搜：

# PNG / JPG → WebP（质量 85，剥 metadata）
magick input.png -strip -quality 85 output.webp

# 批量转一个目录里所有 PNG / JPG
for f in *.png *.jpg; do
  magick "$f" -strip -quality 85 "${f%.*}.webp"
done

# 图片缩放 + 转 WebP（控制宽度上限，截图常用）
magick input.png -resize "1400x>" -strip -quality 82 output.webp
# 注意：1400x> 的 > 是关键——只缩小不放大，省 size

# SVG → PNG（rsvg-convert，最稳）
rsvg-convert -w 1200 -h 630 input.svg -o output.png

# SVG → WebP（先转 PNG 再转）
rsvg-convert -w 1200 -h 630 input.svg -o /tmp/_temp.png && \
  magick /tmp/_temp.png -strip -quality 88 output.webp

# AVIF 转换（如果非要用）
avifenc --speed 4 --min 25 --max 40 input.png output.avif

# HEIC → JPG（iPhone 照片救星）
magick photo.heic photo.jpg
# 或者批量：for f in *.HEIC; do magick "$f" "${f%.*}.jpg"; done

收尾

写完这篇我发现一件事：90% 的博客主在格式选择上都在浪费带宽——不是因为他们不懂，是因为默认导出 PNG/JPG 太顺手了，没人停下来想一下。

要是看完这篇你愿意试试把博客新发的图全转成 WebP，加载速度立竿见影。再进一步把自己画的图表都换成 SVG——你会爱上「想改就改文本」的爽感。

格式没有「最好」，只有「最合适」。SVG 管图表，WebP 管位图，剩下的都是补丁。

— godsun