WebP、PNG 还是 JPG：哪种图片格式最适合网站 SEO？

先说实话

没有哪个搜索引擎会因为页面用 WebP 提供图片就给它加分，图片格式并不是排名因素。真正被衡量的，是页面被打开后多快能对访问者派上用场，而在大多数页面上，横在这两个时刻之间最重的东西就是图片。格式之所以重要，是因为字节数重要，除此之外没有别的原因。

本文讲的是交付：提供哪种格式、如何提供，以及哪些事不必再操心。如果您真正想问的是哪种格式适合哪类图片，JPG、PNG 和 WebP 简明指南会直接回答，这里就不再重复。

图片在哪些地方影响页面指标

在文章页或商品页上，页面首次渲染时最大的可见元素通常是一张图片。因此它的下载时间会计入加载性能的评分，即使页面上其他内容都很快，一张很重的首屏大图也会拖累这项测量。位置更靠下的图片不会影响这个特定数值，但在重要图片加载的同时，它们仍会争抢带宽。

请记住操作的先后顺序。提供合适的像素尺寸，比更换格式节省得多；在布局中预留空间、让图片加载时页面不发生跳动，则完全不需要任何成本。格式是第三个杠杆，而不是第一个。

WebP 真正能带来什么

两点。在视觉质量相当的情况下，有损 WebP 通常比 JPEG 文件更小，同一张图片在网络上传输的数据更少。此外，与 JPEG 不同，它支持 Alpha 通道，这意味着一种格式就能同时覆盖页面上的照片和透明图形，您不必再维护两套处理流程。

代价是工作流程中多了一道编码步骤，还要考虑回退方案。各大主流浏览器的当前版本都支持 WebP，所以回退方案远没有几年前那么重要；不过，如果您的流量中有旧设备或嵌入式客户端，仍然值得保留一份 JPEG。

如何提供 WebP 而不出问题

picture 元素就是为此设计的。用它包住图片，列出一个 type 为 image/webp、指向新格式文件的 source 元素，再在里面保留一个普通的 img 标签作为回退，其 src 指向 JPEG。支持 WebP 的浏览器会采用第一个匹配项，不支持的浏览器则回落到 img，两者最终都能显示正常的图片。搜索引擎爬虫遵循与浏览器相同的规则，因此不需要任何特殊配置。

既然在修改这段标记，不妨再做三件事。给 img 加上明确的 width 和 height 属性，让浏览器在文件到达之前就能预留正确的空间。添加 srcset，避免手机下载桌面尺寸的文件。再写一个真正有意义的 alt 属性，图片能否出现在图片搜索结果中，真正起作用的正是这一项。

PNG 和 JPG 仍然适用的场合

对于截图、示意图、界面元素，以及任何边缘锐利、颜色较少的内容，PNG 仍然是正确的选择。有损压缩会把这类内容弄得一团糟，一篇满是模糊截图的帮助文章，无论加载多快，都是更差的页面。如果您的工具能生成无损 WebP，它能用更小的文件完成同样的工作。

当您需要一个世界上任何客户端都能打开的文件时，JPEG 仍是照片的稳妥默认格式，而且依然适合放在 picture 元素的回退位置。您不应该做的，是把照片以 PNG 格式提供。页面比实际需要重上好几 MB，最常见的原因就是这个。

关于 AVIF

AVIF 在文件大小上通常胜过 WebP，照片类内容尤其如此，代价是编码更慢，而且浏览器支持在当前版本中虽然不错，却还没有那么普遍。如果您的构建流程能够生成 AVIF，就把它放在 picture 元素的第一位，其后是 WebP，最后是 JPEG。本站的转换器不输出 AVIF，所以这一步应交给您的构建工具，而不是在这里完成。

更换格式解决不了的问题

• 一张 4000 像素宽的图片显示在 700 像素宽的栏里。WebP 能让它变小，但尺寸依然大得离谱。先调整尺寸，再转换格式。
• 首屏大图要等好几个阻塞渲染的脚本执行完才开始下载。请求都还没发出，格式再好也无济于事。
• 缺少 alt 文本、文件名是 IMG_4471 这样的名字，或者页面上根本没写什么有用的内容。图片搜索依据的是图片周围的页面，而不是编码图片时用的编解码器。

现在就转换几个文件

本站的 JPG 转 WebP 和 PNG 转 WebP 转换器可以接收一批排队的图片，并打包成 ZIP 返回，编码在您的浏览器中完成，而不是在别人的服务器上。如果您想自己权衡质量与体积，通用转换器还提供质量滑块。请注意，重新编码会丢弃 EXIF 数据块，所以生成的 WebP 不再带有原图中的相机信息。

不过，对于定期发布内容的网站，这项工作应该放在构建步骤中，或交给 CDN 完成。为每次上传自动生成多种宽度和格式的流程，胜过任何手动操作，因为再忙的一周它也不会被跳过。修复某个具体页面时，手动转换即可；要修复整个网站，就把它自动化。