WebP 和 AVIF 该不该上：目录站缩略图的格式选择和 srcset 配置

目录站的页面重量里，缩略图通常占大头。一页 50 个条目，每个条目一张 100KB 的缩略图，就是 5MB，这一页在手机上基本没法看。换格式是收益最高的一招，动手之前先把三件事想清楚。

图片来源：网络，版权归原作者所有，侵权请联系删除

两个格式的差别

格式	相对 JPEG 的体积	支持度	适合场景
WebP	小约 25% 到 35%	九成五以上，主流浏览器全覆盖	默认选择，兼容性最好
AVIF	小约 40% 到 50%	九成上下，Safari 16 起支持	大图、首屏图收益最明显
JPEG / PNG	基准	全部支持	兜底、需要透明通道时

不同来源给的支持度数字略有出入，但结论一致：WebP 已经可以当默认格式用，AVIF 需要留兜底。AVIF 的压缩率更高，代价是编码慢，大批量生成缩略图时服务器开销明显，这点在做批量转换时要算进去。

搜索引擎能索引这两种格式吗

能。谷歌官方支持的图片格式列表里包含 WebP 和 AVIF，它们可以被索引，也能进图片搜索结果。但有个细节值得注意：用 <picture> 元素时，索引主要认的是 <img> 标签 src 里的那个兜底地址。所以兜底图用 JPEG 或 PNG 更保险，别把兜底也写成 AVIF。

写法大致是这样：

<picture>
  <source type="image/avif" srcset="/t/3821.avif">
  <source type="image/webp" srcset="/t/3821.webp">
  <img src="/t/3821.jpg" alt="某设计素材站" width="120" height="120" loading="lazy">
</picture>

浏览器按顺序挑它能解码的第一个，都不行就落到 img。爬虫拿到的是 img 的 src，也就是那张 JPEG。

srcset 和 sizes 怎么写才不浪费

srcset 解决的是「不同屏幕该给多大图」，sizes 告诉浏览器这张图在页面上实际占多宽。两个必须一起写，只写 srcset 不写 sizes，浏览器会按整个视口宽度去猜，结果就是手机上下载了桌面尺寸的图。

目录站的缩略图通常不需要太多档。显示尺寸是 96 到 160 像素的话，准备 1 倍和 2 倍两档就够了，配合 WebP 压缩，单张能压到 5KB 以内。别为了好看准备四五档，多档意味着多份文件要生成、要缓存、要清理。

还有一条：srcset 里写的宽度要和实际文件宽度一致。有人为了让分更高去写不存在的尺寸，浏览器真下载的时候会发现对不上，得不偿失。

用 CDN 自动转换的两个坑

很多 CDN 支持按请求头的 Accept 自动转格式，改个参数就行，很省事。但有两个地方要注意。第一，按内容协商返回不同格式，就必须带上 Vary: Accept，否则缓存会把 AVIF 版本发给不支持的浏览器。多数主流 CDN 会自动处理这件事，用之前确认一下，别想当然。

第二，转换后的 URL 通常不变，但内容变了。这会影响你在图片 sitemap、og:image、结构化数据里写的地址。这些地方建议仍然写原始地址或者明确的图片地址，保持可控，不要写那个靠协商才能确定格式的 URL。

别忘了宽高和 alt

width 和 height 属性一定要写，浏览器靠它们提前算出宽高比，避免图片加载完成时把下面的内容挤下去，这是 CLS 最常见的一个来源。alt 文本按描述性来写，别堆关键词，这一点在目录站上尤其容易犯，因为条目太多，很容易用脚本批量生成一堆「XX网站 XX官网 XX入口」这样的 alt。

我的取舍

先全站上 WebP，这一步收益大、风险低、兼容性没问题。AVIF 只给首屏大图和热门分类的封面图用，因为它的编码成本高，批量生成几万张小缩略图不划算。等哪天 CDN 的实时转换成本降下来，再考虑全量切过去。别为了追新格式把流程搞复杂，缩略图这块，稳定比先进重要。