图片格式转换怎么选,JPG/PNG/WebP/GIF 一篇讲清

每次交付素材,总有人在群里问:这张图我该存 PNG 还是 WebP?转 JPG 会不会糊?发微信公众号又只认哪几种?格式选错,要么文件白白大一圈拖慢页面,要么透明背景烤成一片实色再也救不回来。这篇把四种最常见格式的脾气讲透,再给一个我自己跑过的真实体积对比。

四种格式各自的脾气

先记住一句话:没有"最好"的格式,只有"最合适"的场合。

JPG(JPEG):有损压缩,没有透明通道。压缩比高,适合照片、人像这类色彩连续过渡的内容。缺点是不能透明,而且每存一次就掉一点画质。
PNG:无损压缩,带 alpha 透明通道。适合 logo、图标、UI 截图、线稿这类需要透明背景或锐利边缘的图。代价是照片类内容下文件会明显偏大。
WebP:同时支持有损和无损两种模式,带透明通道,还能做动图。基本是 PNG 和 JPG 优点的合集,体积通常更小。现代浏览器近六年都支持。
GIF:老牌动图格式,只有 256 色,文件偏大。除了兼容性极老的场景,动图这块现在多数已被动图 WebP 取代。

WebP 到底能省多少

按 Google 官方给的数据,在同等视觉质量下,有损 WebP 比 JPG 小约 25%~30%,无损 WebP 比 PNG 小约 26%。这不是营销话术,是可以自己量出来的。

我前阵子帮一个营销站换 logo,原图是一张 200KB 的 PNG。丢进图片格式转换器,选 WebP,质量滑到 0.85,出来一张 40KB 左右的文件。logo 在常规展示尺寸下肉眼看不出任何差别,体积却小了 5 倍,而且 alpha 通道还在,圆角叠在渐变背景上依然干净。按这个站每月 5 万 UV 算,省下来的带宽很可观。这一步用图片格式转换器四秒就能完成,不用专门开 Photoshop 走"另存为"。

何时用哪个,给一张速查

照片、人像、复杂渐变 → JPG 或有损 WebP,优先 WebP。
logo、图标、需要透明背景 → PNG 或无损 WebP。
UI 截图、纯文字、线稿 → 无损 PNG 经常比有损格式还小,别盲目转 WebP。
动图 → 动图 WebP,体积通常是同内容 GIF 的三分之一到一半。
要发到只认 JPEG/PNG 的平台(比如微信公众号封面) → 先把 WebP 转回 PNG 再传。

有一个坑提前说:JPG 转 PNG 不会"恢复"透明背景。JPG 本来就没有 alpha 通道,原图的白底已经实打实烤进像素里了,转出来的 PNG 也是带实色背景,不是透明的。真要透明,得用专门的抠图工具。

本地浏览器转换,不上传更省心

很多在线转换网站会把图先传到它的服务器再转完发回来。这意味着你的设计稿、合同扫描件、私人照片都过了一遍别人的机器。对设计稿来说可能违反 NDA,对照片来说还可能连 GPS 坐标一起泄露。

真正干净的做法是全部在浏览器本地完成。转换流程是:文件 → 离屏 Canvas → 重新编码 → 下载,整个过程一个字节都不出标签页。转的时候打开浏览器 DevTools 的 Network 面板看一眼,上传请求数是 0。顺带一提,Canvas 只搬像素数据,所以 EXIF、GPS、相机型号这些元数据在重编时会被一并清掉,发到二手平台或社交资料时反而是好事。

转换前后还能再优化一步

格式转对了,体积往往还有压缩空间。如果你转完发现照片类 JPG/WebP 还是偏大,可以接着用本地图片压缩再压一道;如果尺寸本身就超标(比如一张 4000px 的图塞进 800px 的版位),先用图片尺寸调整把分辨率降下来,体积往往直接砍半。要把小图标内联进 CSS 或邮件模板,则可以用 Base64 图片转换生成 data URI。这几步串起来,基本能把一张图榨到该有的最小体积。

记住一个原则:每多转一次有损格式就多掉一次画质,反复转 PNG → JPEG → PNG 会叠加色度抽样损失,肤色发糊、小字糊成一团。要再出一版,尽量回到原始源文件重新导出,别拿"已经转过一次的输出"当源图继续编辑。

Made by Toolora · Updated 2026-06-13