WebP vs JPG：哪个更适合你的网站？
简单直接的答案（以及为什么事情没那么简单）
对于网络分发，WebP 几乎总是更好的选择。它能在保证同等画质的情况下提供更小的文件体积，并且支持透明度。但 JPG 并不会消失，因为它有着最广泛的兼容性、久经考验，而且在某些情况下仍然是唯一的选择。真正的问题不在于理论上谁是赢家，而在于哪种格式更适合你的具体工作流程。 谷歌在 2010 年推出了 WebP，但多年来，浏览器支持不完善一直是人们忽略它的正当理由。这个借口现在已经不存在了。截至 2024 年，WebP 可以在所有主流平台上正常工作：Chrome、Firefox、Safari（自 v14 起）、Edge 和 Opera。根据 Can I Use 的数据，这覆盖了超过 97% 的全球浏览器流量。如果你仍然出于习惯默认使用 JPG，那你就是在浪费性能优化的空间。 尽管如此，在某些时候，选择 JPG 依然是更务实的选择。也许你老旧的 CMS 会弄乱 WebP 的元数据，或者你的打印工作流程需要特定的色彩配置文件。又或者，你客户的内部系统只认 JPEG。本文将深入探讨它们的技术差异，展示每种格式的闪光点，并帮助你决定哪些值得转换，哪些应该保持原样。
文件大小与压缩：数据告诉我们什么
谷歌自己的基准测试声称，有损 WebP 图像比同等质量的 JPEG 小 25-34%。独立测试也证实了这一点，不过具体效果因图片内容而异。带有平滑渐变的照片在两种格式下都能很好地压缩，但对于那些有锐利边缘、文字或纯色块的图像，WebP 能节省的体积就非常可观了，有时甚至超过 40%。 我们来看些真实数据。一张 1920×1080 的产品照片，在 Photoshop 中以 80 的质量（文件 > 导出 > 导出为 > 品质：80）保存为 JPG，大小可能是 280 KB。同样一张图片，在视觉质量几乎相同的情况下保存为 WebP，体积通常只有 180–200 KB。在一个包含 500 张图片的产品目录中，这一下子就节省了 40 MB。这对页面加载时间和你的托管费用都有实实在在的影响。 WebP 的魔力来自于它更先进的压缩算法，该算法基于 VP8 视频编码。它使用预测编码技术，根据相邻像素块来预测每个像素块，然后只存储微小的修正值。JPG 使用的离散余弦变换（DCT）技术虽然有效，但效率就是没那么高。 需要注意的是，在非常高的质量设置（90以上）下，WebP 的效率优势几乎消失了。如果你要归档母版文件，或者需要毫无可见瑕疵的图像，那么这两种格式的体积差异就变得微不足道了。对于这些情况，最好使用 PNG 甚至 AVIF，尽管 AVIF 又有它自己的一套浏览器兼容性问题。
JPG 依然占优的领域
JPG 的主导地位并不仅仅是怀旧情结；在你批量转换整个素材库之前，你需要了解它所具备的实实在在的优势。 它最大的优势就是兼容性。从最新的 Photoshop 到 Windows 自带的画图工具，再到你公司还在用的某些古老内部工具，几乎所有能想到的软件都能打开 JPG 文件。桌面软件对 WebP 的支持正在改善，但仍然不够统一。Adobe 终于在 Photoshop 23.2（2022年2月）中添加了对 WebP 的原生支持，但旧版本需要插件。对于 Lightroom Classic 用户来说，导出为 WebP 需要像 LR/Mogrify 这样的插件，或者一个笨拙的外部转换步骤。任何试图让整个设计团队统一标准的人都懂，一种不被支持的格式有多痛苦。 然后是印刷领域。JPG 支持商业印刷所需的 CMYK 颜色模式，而 WebP 不支持。如果你的图片最终可能会用在宣传册或海报上，那么先转成 WebP 再转回来，简直是自找色彩空间方面的麻烦，还增加了不必要的压缩步骤。直接把要用于印刷的图片保存为 JPG 或 TIFF 就好了。 你的相机不会拍摄 WebP 格式。现代佳能或索尼相机直出的 JPG 已经针对其特定的传感器进行了高度优化。为了归档而将这些文件转换为 WebP 是个坏主意——你这是在对一个已经压缩过的文件进行二次压缩，这只会增加瑕疵，却带不来任何有意义的体积优势。 最后，有些平台就是不怎么友好。虽然像 Facebook 和 Instagram 这样的主流社交网络会重新处理你上传的所有内容，但许多电子邮件客户端（尤其是旧版 Outlook）在你嵌入 WebP 图片时，只会显示一个破碎的图片图标。
透明度、动画及其他格式特性
在透明度方面，WebP 把 JPG 远远甩在了后面。JPG 根本没有 Alpha 通道。如果你需要为 logo 或抠图产品设置透明背景，过去唯一的选择就是 PNG。WebP 通过支持完整的 8 位 Alpha 透明度改变了这一现状。这让你能用体积小得多的 WebP 文件来替代笨重的 PNG 文件。一张 450 KB 的透明背景产品照片 PNG，通常可以在不损失质量的情况下缩小到 150 KB 以下的 WebP。 WebP 还支持动画，使其成为古老的 GIF 格式的现代化、轻量级替代品。根据谷歌的数据，动画 WebP 通常比同等效果的 GIF 小 64%。如果你还在用 GIF 动画来做 UI 反馈或产品演示，那么切换到动画 WebP 是你能获得的最简单的性能提升之一。 JPG 是一个纯粹的静态、不透明格式。没有透明度，没有动画。所见即所得。在某些方面，这种简单性本身就是一种特性。它保证了在所有工具和平台上的行为都是可预测的，不会有兼容性方面的意外。 对于真正的无损压缩，这两种格式都不是首选，但 WebP 在这方面也有解决方案。WebP 的无损模式通常比同等效果的 PNG 小 26%。CocoConvert 支持 WebP 无损转换，但请注意，一个无损 WebP 有时可能比一个高质量的有损 WebP 体积更大。在进行大规模批量转换之前，一定要先测试这两种选项。
如何在 WebP 和 JPG 之间转换（以及何时转换）
最常见的任务是为你的网站将 JPG 转换为 WebP，而 CocoConvert 让这个过程变得非常简单。上传你的 JPG，选择 WebP 作为输出格式，然后选择一个质量设置。对于照片，80-85 的质量是一个很好的起点；它能在保留可感知细节的同时节省大量空间。对于图形、图标或带有清晰文本的图像，你可能需要从 90 的质量开始，并在降低质量前先直观地检查一下效果。 在批量转换大量图片时，要仔细考虑你的质量设置。CocoConvert 的批量转换器非常适合将同一种设置应用于一批风格一致的图片。但如果你混合了产品图、截图和插画，那么为每个类别分别设置量身定制的质量目标，会得到更好的效果。 将 WebP 转回 JPG 不太常见，但当你需要打印、发给使用旧软件的同事，或者用于有严格格式限制的平台时，你就会需要它。CocoConvert 同样可以轻松处理。但这里要坦诚地提醒一句：将 WebP 转回 JPG 会引入第二轮有损压缩。如果你的 WebP 是由一个质量为 80 的 JPG 生成的，那么新生成的 JPG 会比原始文件看起来更模糊、瑕疵更多。如果你有原始的 JPG 文件，一定、一定要从源文件开始转换。 对于 WordPress 网站，像 Imagify 或 ShortPixel 这样的插件可以自动化整个过程，在上传时转换 JPG，并为支持的浏览器提供 WebP。如果你不想手动管理文件，这是一个可靠的方案。CocoConvert 最适合一次性或周期性的批量任务，而不是作为一个集成到你 CMS 媒体管道中的实时服务器端图像处理器。
性能影响：这对核心网页指标（Core Web Vitals）意味着什么
过大的图片是导致最大内容绘制（LCP）分数过低的主要原因。缓慢的 LCP 会损害你的核心网页指标，并直接影响你的谷歌搜索排名。就这么简单。当谷歌的 PageSpeed Insights 指出图片过大时，它会明确建议使用“下一代格式”来提供这些图片——它指的就是 WebP 和 AVIF。 想一下：在 4G 移动网络下，一张 600 KB 的 JPG 主图会给你的加载时间增加大约 1.2 秒。将同一张图片转换为 380 KB 的 WebP，加载时间会缩短到 0.75 秒左右。这半秒的差异足以让你的 LCP 分数从“需要改进”类别进入“良好”类别（低于 2.5 秒）。这对用户体验和你的网站在搜索结果中的可见度都有可衡量的积极影响。 实现这一功能并提供回退方案的正确方法是使用 HTML 的 `<picture>` 元素： <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero image"> </picture> 这段简单的代码会告诉有能力的浏览器去获取 WebP 图片，而旧版浏览器会自动回退到 JPG。它干净、稳健，而且不需要 JavaScript。如果你是手动管理图片，就应该使用这种模式。 如果你使用像 Cloudflare 这样的 CDN，你可能什么都不用做。只需在你的 Cloudflare 仪表盘中启用 'Polish' 功能（在“速度”>“优化”>“Polish”下），它就可以自动为兼容的浏览器转换并提供 WebP 图片，前提是你使用的是付费套餐。
结论：一个决策框架
与其宣布某个格式是赢家，不如用一个简单的框架来帮助你在具体情况下做出正确的选择。 **用于你的网站或网页应用？** 把你的 JPG 转换为 WebP。浏览器支持已经很稳定，文件大小的节省非常可观，而且质量也很出色。这些好处太大了，不容忽视。使用 CocoConvert 进行批量处理，或者采用自动化的插件/CDN解决方案。 **用于印刷、电子邮件或旧系统？** 坚持使用 JPG。在这些场景下，通用兼容性是没有商量余地的。使用 WebP 的麻烦不值得为了节省那点文件大小，而且你还能避免二次编码带来的质量损失。 **需要透明度？** 试试用 WebP 替代 PNG。体积的减小可能是巨大的，特别是对于带透明背景的照片内容。浏览器对带 Alpha 透明度的 WebP 的支持非常好。 **归档母版文件？** 两个都别用。保留你相机原始的 RAW 文件，或者使用 TIFF 进行无损归档。将你的母版文件压缩成 JPG 或 WebP 是一个破坏性的、无法撤销的单向决定。 **正在使用能自动优化图片的平台？** 先检查一下！像 Shopify、Squarespace，或者安装了优化插件的现代 WordPress，可能已经在自动提供 WebP 格式了。别在你平台已经处理好的手动转换上浪费时间了。 所以，WebP 在网络分发上胜出，而 JPG 在几乎所有其他方面胜出。好消息是，它们之间的转换是一个已经解决的问题，有了像 CocoConvert 这样的工具，你就不必为整个素材库只选择一种格式了。