列表页在手机上打开,网络面板里每张缩略图都下了接近一兆的 1600px 版本,流量翻了几倍,首屏也跟着慢下来。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,有候选集却没有写尺寸描述,浏览器按默认的满屏宽度乘设备像素比去挑,正好挑中最宽的那一张,写了属性等于没写,纯属白白浪费流量。
「srcset 尺寸选择」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。别只看报错的最后一行,往上看几行,真正的起因通常在上面。
<img src='a-480.jpg'
srcset='a-480.jpg 480w, a-960.jpg 960w'
sizes='(max-width: 640px) 100vw, 480px'>
同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。
具体做法是,给每张图片补上按断点描述的尺寸属性 别留空;把候选集里最大的那张压到实际需要的宽度上;用真机连上电脑 确认实际下载的是哪个图片地址。
最后用这个标准收尾,手机上取到 480 或 960 的候选图,图片流量降到原来的三成左右,首屏也快了。
