2026-08-13
webp vs jpeg 是网页照片优化的选择题。JPEG 统治了照片三十年，WebP 是后起之秀：同样的画质，体积小 25-35%。这篇从压缩原理讲起，对比画质、兼容性和体积，最后给出 2026 年的明确建议。
JPEG 和 WebP 都是基于人眼感知的有损压缩，但算法不同。JPEG 用离散余弦变换，把图像切成 8x8 的块分别压缩，质量参数低时会出现明显的块状噪点。WebP 用更现代的预测编码，在同样的质量下保留更多细节，或者同样的细节占用更少体积。
实际数字：质量 80 时，WebP 通常比 JPEG 小 25-35%。质量越高差距越小，质量越低差距越大。对照片来说，WebP 在体积上基本没有输的时候。
同体积对比，WebP 画质更好；同画质对比，WebP 体积更小。这是核心结论。但实际使用中有个隐藏因素：JPEG 经历了三十年的编码器优化，MozJPEG 这类编码器输出的 JPEG 质量很高。WebP 的默认编码器也很成熟，但如果你用的是老工具转换，质量参数没调好，WebP 反而可能更差。
关键建议：别拿默认参数直接转。WebP 质量设 80-85 是照片的安全区间，低于 70 会出现可见噪点，JPEG 同理。转换前备份原图。
2026 年的现实：Web 访问者几乎都支持 WebP，但内部流程（邮件附件、打印、老旧 CMS）仍是 JPEG 的天下。这也是为什么 <picture> 标签是标准做法：给现代浏览器 WebP，给老环境回退 JPEG。
一句话：新项目照片默认 WebP，外发和打印走 JPEG，用 <picture> 兼顾两头。
网上流传的对比图大多是极端参数下的产物：JPEG 质量 30 vs WebP 质量 80，结论当然一边倒。公平的对比是同一质量水平。质量 80-85 区间，两者的差别普通用户几乎看不出来，但体积差距稳定在 25-35%。与其纠结选哪个，不如把质量参数调对，那才是真正的优化空间。
同体积下 WebP 画质更好，同画质下 WebP 体积小 25-35%。质量 80-85 区间两者差别肉眼几乎不可见。
支持，但照片场景通常用不到。JPEG 不支持透明，这也是 WebP 的额外优势。
能，几乎所有图片工具都支持。转换后体积通常减少 25-35%，但建议用质量 80 以上，别用默认的激进压缩。
默认 WebP。所有主流浏览器都支持，配合 <picture> 标签给老环境回退 JPEG 即可。只有外发、打印等明确需要最大兼容性的场景才用 JPEG。