图片格式选择指南 - JPG、PNG 和 WebP 对比 | Omibox

做网站的时候，设计师给了我一堆 PNG 图片，每张都好几 MB。上传后网站加载慢得要死，老板还以为是服务器问题。后来研究了一下图片格式，才发现这里面学问还挺多的。

常见格式对比

先说说我常用的几种格式，每种都有自己的适用场景：

JPG - 老牌选手

优点: 文件小，兼容性好，所有设备都支持

缺点: 有损压缩，不支持透明背景

适合: 照片、复杂图像、社交媒体分享

PNG - 设计师最爱

优点: 无损压缩，支持透明背景，质量高

缺点: 文件大，不适合照片

适合: Logo、图标、需要透明背景的图

WebP - 新秀

优点: 比 JPG 小 30%，支持透明，质量还好

缺点: 老浏览器不支持(IE 就别想了)

适合: 现代网站、移动端应用

我的选择策略

网站图片

现在我的网站图片都用 WebP，配合 JPG 做备用：

这样新浏览器用 WebP(更快)，老浏览器自动降级到 JPG

社交媒体

发朋友圈、微博这些，直接用 JPG。虽然 WebP 更小，但很多平台会自动转成 JPG，提前转好反而更快。

设计稿

给客户看的设计稿用 PNG，保证质量。但记得压缩一下，不然发邮件都发不出去。

转换技巧

格式转换其实很简单，但有几个坑要注意：

PNG 转 JPG

直接转会有白色背景。如果原图有透明部分，最好先在转换工具里设置背景色。

JPG 转 WebP

这个最简单，直接转就行。我测试过，一张 2MB 的 JPG 转成 WebP 大概 600KB，质量几乎看不出差别。

批量转换

如果图片多，建议用命令行工具或者批量处理软件。一张张转太费时间，我之前转了 200 张图，手都点酸了。

实际案例

分享一个真实案例。我们公司官网原来用的都是 PNG，首页加载要 8 秒。后来我做了这些优化：

照片全部转成 WebP (从 15MB 降到 4MB)
Logo 和图标保持 PNG，但压缩了一下
加了 JPG 备用方案

结果首页加载时间降到 2 秒，Google PageSpeed 分数从 45 涨到 92。老板还以为我换了服务器，其实就是改了图片格式。

我的建议

网站优先用 WebP - 速度提升明显，用户体验好
保留原图 - 转换前备份，万一需要重新处理
测试兼容性 - 转换后在不同设备上看看效果
别过度压缩 - 文件是小了，但模糊了就得不偿失

快速转换图片格式

支持 JPG、PNG、WebP 互转，本地处理，秒级完成：

开始转换

图片格式选择指南 - JPG、PNG 和 WebP 对比