JPEG vs PNG vs WebP — 如何选择图片格式及何时转换

几年前做一个小型商业网站的性能审计。首页有11张图片，全部是PNG格式，全部是产品照片。最大的4.2MB，仅英雄图一张就2.8MB。

没有人刻意做了什么错事。设计工具默认输出PNG，图片看起来很好，没人质疑过。确实好看。但同时，如果用80%质量转换成JPEG，视觉上人眼无法区分，图片总大小却能从约18MB降到约2.5MB。

这类问题在网络上随处可见，而且完全可以修复，只要了解每种格式实际上擅长什么。

JPEG：照片的主力格式

JPEG自1992年就存在，至今仍是互联网上使用最广泛的图片格式。它能流传至今的原因是，它非常适合其预期用途：压缩照片。

照片有连续的色调变化——颜色和光线的平滑渐变相互融合。JPEG压缩利用这一点，丢弃人眼相对不敏感的高频细节。结果是文件可以是未压缩图像的十分之一大小，同时几乎没有可见的质量下降。

JPEG适合的场景：

• 产品照片、编辑照片、英雄图
• 具有平滑渐变和自然色彩变化的任何图像
• 社交媒体上传、电子邮件附件、文件大小重要的地方

JPEG不适合的场景：

• 包含锐利边缘和文字的图像（logo、截图、图表）——压缩在高对比度边缘产生可见的振铃伪影
• 需要透明度的图像——JPEG没有alpha通道支持
• 将被反复编辑的图像——每次保存都会引入额外的质量损失

**80%规则：**低于70-75%，大多数照片中JPEG伪影开始变得明显。高于85-90%，文件大小显著增大但视觉改善极少。75-85%范围是在不牺牲可见质量的情况下获得大部分压缩收益的范围。80%是一个安全的默认值。

PNG：需要精确像素时

PNG于1990年代中期创建，部分原因是作为GIF的无专利替代品。它使用无损压缩——PNG中的每个像素都被精确保留。

PNG是正确选择的情况：

• 界面、代码或文字的截图——任何像素都必须可读
• 具有纯色和锐利边缘的logo和图标
• 需要透明度的任何图像（PNG支持完整的alpha通道）
• 用于进一步编辑的图像——没有世代损失
• 像素艺术和图表

PNG是错误选择的情况：

• 照片。照片的PNG几乎总是比等效JPEG大3到5倍，且没有可见的质量差异。这就是开头提到的那个错误。

WebP：现在应该成为你的默认格式

WebP由Google开发，于2010年发布。Safari在2020年才添加支持，2021年后所有主流浏览器都支持WebP，曾经困扰人们多年的"浏览器支持"问题基本已经解决。

WebP支持：

• 有损压缩（类似JPEG，但在相同质量下通常小25-35%）
• 无损压缩（类似PNG，但通常小26%）
• 透明度（有损和无损模式下的alpha通道）
• 动画（尽管创建复杂，并非所有编辑器都支持）

实际上，对于大多数照片内容，WebP是JPEG的严格升级版。相同图像，更小文件，相同质量。对于以前因透明度需求而需要PNG的图像，WebP以更小的文件大小提供透明度。

**注意：**一些旧的CMS平台、电子邮件客户端和设计工具仍然对WebP支持有限。在为新闻通讯导出图像之前，值得确认邮件平台是否处理WebP。

转换场景

PNG转JPEG：最常见且影响最大的转换。如果产品或英雄照片存储为PNG，将它们以80%质量转换为JPEG通常可以减少60-80%的文件大小，且没有可见的质量损失。唯一失去的是透明度——如果PNG使用了alpha通道，转换前需要填充背景色。

PNG转WebP：两全其美。获得透明度支持（与PNG一样）和更小的文件大小（比JPEG更好）。

JPEG转WebP：可靠的常规优化。现有JPEG照片档案可以为现代浏览器的访问者重新提供为WebP，节省25-35%带宽，无可见质量变化。

WebP转JPEG或PNG：当向不接受WebP的平台或工具提交图像时可能需要。以高质量设置从WebP转换回JPEG或PNG应该在视觉上无损。

ToolboxHubs图片格式转换器使用方法

图片格式转换器使用Canvas API在浏览器中完全运行：

1. 上传图片 — 拖放或点击选择。接受JPEG、PNG、WebP和GIF输入。
2. 选择输出格式 — 从格式下拉菜单中选择JPEG、PNG或WebP。
3. 设置质量 — 对于JPEG和WebP有损输出，有质量滑块（默认80%）。PNG无损输出没有质量设置。
4. 转换并下载 — 点击转换并下载结果。

更改质量设置时预览会更新，让你在下载前看到权衡效果。

**值得了解的限制：**动画GIF可以上传，但会转换为静止图像（第一帧）。不支持SVG输入。

质量设置的含义

质量百分比不是对任何客观事物的直接衡量——它是一个压缩参数，控制编码器丢弃信息的激进程度：

• 90-100%：接近无损。文件较大。适用于将被进一步编辑或打印的图像。
• 75-85%：标准网页甜蜜点。对大多数网页内容适当。
• 60-75%：明显更小的文件。在高对比度区域或仔细检查时可能出现可见伪影。缩略图和快速加载比质量更重要的小UI图像可接受。
• 低于60%：可见的块状和模糊。

性能影响是真实的

给出具体数字：一个有大量未优化PNG的典型照片密集型登陆页面可能有15-25MB的图像数据。以80%质量转换为WebP可以将其降到2-4MB。在10Mbps平均移动带宽下，图像加载时间从12-20秒变为1.6-3.2秒。这些数字直接影响跳出率。

Google的Core Web Vitals——特别是Largest Contentful Paint (LCP)——受图像大小严重影响。如果LCP元素是图像（通常如此），该图像的格式和压缩是你对性能分数拥有的最直接杠杆之一。

相关工具

图片压缩工具 — 如果想在不改变格式的情况下减小文件大小。

图片调整大小工具 — 在浏览器中将3000px宽的图像缩放到400px来显示？在提供之前调整大小与格式选择同样重要。

总结

格式选择的简单指南：网页照片用JPEG或WebP。需要透明度的图像用WebP（或旧环境用PNG）。logo、截图和包含文字的图像用PNG。质量滑块从80%开始，看到问题再调整。

图片格式转换器处理转换工作。选择哪种格式的判断，这篇文章已经给出了。