图片格式详解：JPG、PNG、WebP、HEIC 与 SVG——怎么选、何时转、如何转不损画质
五种格式，五种分工
每种图片格式都押注了一个「什么最重要」。JPG 押照片，PNG 押精确，WebP 押带宽，HEIC 押未来（苹果版本的未来），SVG 押可缩放。没有一个完全赢，所以你总会拿着错误格式的图、需要另一种——这就是转换工具存在的理由。
熟练的捷径是按用途匹配格式，而不是背参数表：
| 格式 | 擅长 | 短板 |
|---|---|---|
| JPG | 照片、不透明、最终交付 | 透明、文字边缘、再编辑 |
| PNG | 截图、文字、透明、编辑母版 | 照片体积 |
| WebP | 网络交付 | 旧软件支持 |
| HEIC | iPhone 拍摄效率 | 苹果生态外的一切 |
| SVG | 图标、Logo、示意图 | 照片 |
本指南走完这张表引出的所有决策——以及现实把错误格式塞给你时的转换动作。文中链接的转换均在 ToolVault 浏览器本地完成（文件不上传）。
JPG：压缩的常青树
JPG 活了三十年因为押对了：人眼容忍照片里的小误差，换取约 10 倍小的文件。它的设计带来两个至今坑人的属性。
有损且分代。 每次保存都重压缩。打开 JPG→编辑→保存→重复，伪影就叠罗汉：锐边周围的块状光晕、天空的色带。工作规则很简单：从无损母版（PNG 或编辑器原生格式）出发编辑，导出一次 JPG，永不二次编辑导出件。顺手检查工作流里的隐形分代——某些聊天应用和 CMS 上传时会静默重压缩。
没有透明。 JPG 像素永远不透明。任何带 alpha 通道的 WebP 或 PNG 走一遍 JPG 就失去透明——运气好合成到白底，运气差黑底。贴纸、Logo、抠图永远不该是 JPG。本站以 JPEG 为目标的转换器会在编码前把半透明像素合成到白底，避免「透明变黑洞」。
PNG：精确的代价
PNG 无损：存进去的像素就是取出来的像素。这使它成为「还要再编辑」的东西的母版格式，也是截图的天堂——平色、锐利文字边缘、透明，在它的 deflate 模型里都压得漂亮。
反面：PNG 是照片的错误答案。照片存 PNG 常规比 JPG 双胞胎重 3-5 倍——无损压缩无法利用人眼对近似的容忍。多数团队落在实践模式：磁盘上 PNG 母版，交付时导出 JPG 或 WebP。
PNG 的透明也是一类经典 bug 的安静来源：深色模式 UI 假设了背景色。透明背景导出的图标在浅色完美、深色消失。修复属于资产侧（两种背景都测），不属于 CSS 拯救。
WebP：带宽的答卷
同等观感下，WebP 照片体积常比 JPG 小约 25-35%，透明场景常比 PNG 小 50-70%，现代浏览器都能渲染。问题从来不是 WebP 能不能省带宽——能——而是文件下游的一切是否接受它。
实践里仍会断的地方：部分 CMS 上传管线、旧版 Windows 看图、一批企业软件。网站的稳健模式是 <picture> 带 PNG/JPG 回退，而不是全押一种格式。个人工作流的问题只是「目的地开不开」——不开就转：要兼容性用 WebP 转 JPG，要无损编辑母版用 WebP 转 PNG。反向交付可用 JPG 转 WebP 或 PNG 转 WebP。
一个值得知道的细节：动态 WebP 存在。经 Canvas 静态转换只会留下第一帧——动的东西属于专用动图/视频工具，不属于静图转换器。
HEIC：高效拍摄，狭窄兼容
iPhone 拍 HEIC 因为它真的高效——拍摄端每字节画质通常优于 JPG。问题在苹果生态之外：没装扩展的 Windows、旧版 Office、一半的网络上传框。于是 HEIC 用户在不停转换，方向取决于目的地：
- 网页或现代工具：HEIC 转 WebP 更能保住体积优势且有真实浏览器兼容性
- 通用兼容：HEIC 转 JPG——1995 年以来几乎一切系统都开的格式
- 编辑母版：HEIC 转 PNG——解码之后像素无损（拍摄时 HEIC 本身已是有损）
一个意外到人的细节：iPhone 照片带 Display P3 广色域。转到 sRGB 基础的格式时，最饱和的色彩会偏移几个百分点——多数照片不可见，鲜艳产品图值得知道。Chromium 在解码前无法预览 HEIC 缩略图，占位提示是预期行为，不是上传坏了。多图 HEIC（连拍/部分导出）会按帧拆成多个下载，文件名自动去重。更长的 HEIC 工作流见 HEIC 转 JPG 指南。
SVG：永远缩放的那一个
SVG 不是像素，是几何。所有规则因此改变：无限缩放（一个 Logo 在 16px 和 16 米宽都锐利）、文件常比位图图标小、可以用 CSS 改样式。
坑：SVG 以字体引用携带文字，缺字体就变样——修法是编辑器里文字转轮廓。照片做成 SVG 很惨（格式用形状逼近照片，输得很彻底）。SVG 转位图是为了「要像素的目的地」——SVG 转 PNG 以 2-4 倍渲染出 retina 锐度——但这是单程门：光栅化太小分辨率就永远没了，而 SVG 本可以随时重渲染更大。
诚实边界：共享浏览器转换器把 SVG 光栅化为 JPEG 或 PNG。不提供直接 SVG→WebP（引擎支持参差）；若需要 WebP，先 SVG→PNG，再走 PNG 转 WebP 或 图片压缩。
AVIF 与 GIF：诚实提及，不假装支持
AVIF 在摄影内容上常能比 WebP 更省字节——前提是你的编码/CDN 链路支持。ToolVault 的 Canvas 转换器与压缩工具不编码 AVIF；需要 AVIF 请用专用编码器（命令行 / squoosh / CDN 变换）。写「本站支持 AVIF」会是虚假宣传。
GIF 仍出现在短循环与聊天表情。Canvas 静图路径通常只留一帧。动画请走专用工具；别指望把 GIF 丢进格式转换器后循环还在。
转换 vs 压缩：先分清要解决什么
这两件事常被揉成一步，其实目标不同：
| 目标 | 先用哪个 | 原因 |
|---|---|---|
| 容器不对（HEIC 被拒、WebP 打不开） | 格式转换（HEIC→JPG、WebP→JPG 等） | 先改编码/容器，体积其次 |
| 格式对了，文件太重 | 图片压缩 | 调质量 / 最大宽度；可顺带换格式 |
| 两者都错 | 先转格式，再压缩 | 别在已经伤过的导出件上叠两轮有损 |
| 要嵌进 HTML/CSS | 先压再 图片转 Base64 | Base64 约膨胀 33%，先缩小像素 |
能扛过报名/签证门户的顺序：先锁接受的格式 → 再锁像素尺寸 → 最后拧质量。反过来会先把脸和文字糊掉，门户还没看到合规体积。
浏览器转换器实际做了什么（以及不做）
本站 HEIC/WebP/SVG 转换与图片压缩共用 Canvas 路径（HEIC 另加 heic2any / libheif WASM）。以下与工具页说明一致，不是事后补丁：
- EXIF / GPS / ICC 会被剥离。
drawImage+toBlob只带走像素。分享时是隐私收益；若还要时间戳或定位，请另存母版。 - JPEG 会白底合成。 半透明像素不会变成黑洞。
- 方向在引擎允许时写入像素。
createImageBitmap(..., { imageOrientation: 'from-image' })能扶正多数 iPhone 照片；输出横着通常是文件截断或引擎忽略了 EXIF。 - 动画塌成一帧。 动态 WebP/GIF 走静图转换 → 仅第一帧。
- 不是「无损改 JPEG」。 即使 JPG→JPG（或高质量再压）也是重新量化。
- HEIC 解码是按需加载的 WASM。 大批量可能撑爆内存；先试一张再放大批量。
- 不编码 AVIF（见上节）。
若输出还要卡体积上限（报名系统常见 30–100KB），格式转换之后再接 图片压缩：先格式，后体积。
保画质的转换规则
多数转换损伤是自己造成的。四条规则覆盖几乎全部：
- 无损转有损最多一次。 PNG 转 90% 质量的 JPG：可以。那张 JPG 再转 85% 的另一张：伪影叠层。
- 保留母版。 无论为交付转什么，保住最高保真源。存储比重拍便宜。
- 质量 75-90 是可用带。 70 以下渐变色带、肤色海报化；90 以上花字节买没人看得见的差异。本站转换器默认接近 90；压缩工具的「均衡」预设约 80，适合日常网页照片。
- 格式配目的地，不配潮流。 只收 JPG 的上传表单不在乎 WebP 省不省带宽。
照片要以文档而非图片形式旅行时——票据、证件复印件——包进 PDF 而不是散图发送：JPG 转 PDF 原图直嵌不重编码，画质全程存活。
速查决策表
| 手里有… | 目的地要… | 动作 |
|---|---|---|
| iPhone HEIC | 任意老旧上传 | HEIC → JPG |
| iPhone HEIC | 现代网页、更小体积 | HEIC → WebP |
| iPhone HEIC | 继续像素编辑 | HEIC → PNG |
| WebP | 旧系统 / 邮件客户端 | WebP → JPG |
| PNG 截图 | 更小的不透明交付 | PNG → WebP 或压缩 |
| SVG Logo | 位图槽位 / 邮件 | SVG → PNG 用 2×–4× |
| 格式已对、体积超标 | 门户 KB 上限 | 图片压缩（先宽度后质量） |
FAQ
WebP 一定比 JPG 小吗？
照片在相近观感下常常更小，但不是定律——已经很小的 JPEG，或更适合 PNG/无损 WebP 的图形，可能打破这条。以实际文件对比为准。
HEIC → PNG 能找回 JPG 会丢掉的细节吗？
它保住的是 HEIC 解码之后 的像素。拍摄时已是 HEVC 有损；PNG 变不出 HEIC 里没有的细节。若还要继续编辑，它能避免再叠一轮有损。
转成 JPG 后透明为什么变白（或变黑）？
JPG 没有 alpha。诚实的转换器会合成到白底；粗糙的实现会留下 alpha=0 下未初始化的 RGB（常见为黑）。透明必须保留时用 PNG/WebP。
浏览器里转换后还能保留 GPS 吗？
本站 Canvas 路径不能——元数据按设计剥离。请转副本；若出处重要，归档原始 HEIC/JPG。
工具不导出 AVIF，那它放哪用？
当你的主机/CDN 能编码、受众浏览器能解码时用 AVIF，并保留 JPG/WebP 回退。不要等待这些工具提供 toBlob('image/avif')——它们目前不提供。
本地处理的脚注
格式转换比看上去更常涉及隐私：被转换的照片经常是私人照片。上文链接的每个工具都在浏览器内处理——文件不上传，DevTools 里可边转边验证。
排查注记
开篇的框架句决定了全文结构：每种格式都押注了一个「什么最重要」，没有一个完全赢，所以拿着错误格式的图是常态、转换是刚需。JPG 的两个属性被写成「至今坑人」：有损分代（伪影叠罗汉，规则是从无损母版导出一次、永不二次编辑导出件）和没有透明（半透明像素合成白底是转换器该做的诚实处理）。转换 vs 压缩那张表先分清目标再给动作，硬纪律是先转格式再压缩——别在已伤过的导出件上叠两轮有损；门户场景的顺序更具体：先锁格式、再锁尺寸、最后拧质量，反过来会先把脸和文字糊掉。
更多格式转换与浏览器本地工具见 ToolVault。相关阅读：HEIC 转 JPG 指南、图片压缩指南。