列表页图片换成新一代压缩格式,体积和抓取会一起变吗
列表页图片换成新一代压缩格式,体积和抓取会一起变吗?体积会降,抓取不一定变。文档给的压缩读数是可比照的部分;抓取侧读到什么,取决于图片清单是否给全、替代文本是否写清、以及回退格式是否留在同一处。
文档给出的压缩读数该怎么引用
按官方文档的表述,新一代格式(AVIF)在有损模式下比 JPEG 小约 50%;与 WebP 相比压缩也更好,同一组 JPEG 的中位压缩约为 50% 对 30%。有损 WebP 相比同视觉质量的 JPEG 平均小 25%—35%,无损 WebP 相比同图的 PNG 通常小 26%。
引用这些数时要保留两个限定:它们是「同一组图的中位/平均」而不是单张图的结果,且都建立在「视觉压缩程度相当」的前提上。列表页里图片数量多、单张尺寸小,收益通常小于文档给出的中位读数;反之,摄影类大图受益更接近甚至超过该值。
| 格式 | 适用内容 | 相对读数 | 回退要求 |
|---|---|---|---|
| AVIF | 照片类、需高压缩的详情页主图 | 有损比 JPEG 小约 50% | 支持尚不全面,需并列回退 |
| WebP | 通用照片与图标 | 有损比 JPEG 平均小 25%—35%,无损比 PNG 小 26% | 老浏览器需回退 |
| JPEG / PNG | 回退与兼容基线 | 作为比较基准 | 作为最终兜底 |
为什么必须留回退格式
文档在这点上写得直接:由于支持尚不全面、历史深度有限,应当用 picture 元素提供 WebP、JPEG 或 PNG 的回退。回退不是保守,而是把「取不到图」的风险从格式切换里剥离出去——页面出现空白图位时,很难判断是路径问题还是格式不支持。
工程上还需注意:带回退时,资源选择由浏览器决定,日志里看到的图片类型会分成几组。换格式之后如果只统计一种类型,会误判生效范围。
换格式的顺序:先详情页还是先列表页
列表页更适合先动。理由是列表页的图片以缩略形式重复出现,单页请求数量多、体积收益集中,而且列表页通常由模板统一输出,改一处即覆盖整站。
建议按这个顺序:
- 先确定尺寸来源。列表页的缩略尺寸应由统一的图片规格决定,而不是让模板各自写宽高参数;尺寸不统一时,新一代格式的收益会被重复下载不同尺寸抵消。
- 再做回退结构。按 picture 或等效方式组织多格式来源,保证取不到新格式时仍有兜底。
- 再核生成链路。上传后的缩放、水印与自动配图都要产出对应的新一代副本,否则模板引用了不存在的文件。
- 最后清缓存与站点地图。旧的图片清单要重新生成,图片地址变更后仍留在原清单里,等于让抓取方继续读旧资源。
自动配图与水印怎么配合
站内的标题自动配图会按标题内容为文章分配图片,格式切换时这一条链路要一起改:生成的副本必须包含回退格式,否则部分页面取不到图。水印管理负责给图片加标识,处理顺序上通常位于缩放之后、写出多格式之前;如果水印步骤只输出老格式,新一代副本会绕过它。
内容模型层面也值得确认一次:主图字段是单值还是多值。只存一个地址的字段,多格式回退要靠模板拼接约定;字段能同时记录多份副本时,引用更明确,日后换格式也不用改历史数据。
抓取侧真正读到的是什么
图片被抓取到,靠的是清单与文本,不是格式本身。两件事决定结果:
- 图片地址是否出现在可被发现的位置。站内 Sitemap 自动生成负责页面的清单,图片信息要跟着页面一起可被发现,只在模板里换个格式不会改变被发现的范围;
- 替代文本是否说明白内容。图片本身没有语义,抓取方读的是文件名与替代文本,换格式时这两项要一起检查。
所以「换格式会不会让抓取变差」这个问题,更准确的版本是:换格式之后,图片清单与文本描述有没有跟着更新。
常见问题
问:全站一次换完还是灰度? 答:先列表页、按栏目灰度,观察取图失败与体积变化两条指标,再推到详情页。
问:只换 WebP 不换新一代格式行不行? 答:可以。WebP 的兼容范围更广,收益低于 AVIF 但落地风险更小。
问:延迟加载要不要一起开? 答:分开做。延迟加载改变首屏请求集合,格式改变体积,两者同时调整时难以判断指标来源。