Chrome预加载响应式图片未匹配对应尺寸 火狐正常 如何解决

问题根因 #

该问题是Chrome 94及更早版本的已知逻辑缺陷：当srcset/imagesrcset属性中的资源没有按宽度描述符严格升序排列时，Chrome不会按照规范匹配最优尺寸的资源，只会加载最后一个宽度大于计算所需宽度的资源，而Firefox的解析逻辑兼容乱序排列的srcset，因此会出现跨浏览器表现不一致的情况。

解决方案 #

• 优先调整srcset和预加载标签的imagesrcset属性，将所有资源按宽度描述符从小到大严格升序排列，最小尺寸（150w）放在最前，最大尺寸（1200w）放在最后。该方案兼容性最好，适配所有主流浏览器的解析规则。
• 如果无法调整srcset排序，可以将img标签的默认src属性替换为最小尺寸的占位图，不要直接设置最大分辨率的原图，避免Chrome优先命中大图缓存后跳过srcset匹配逻辑。
• 首屏展示的图片建议移除loading=lazy属性，避免懒加载逻辑和旧版Chrome的srcset解析逻辑冲突，干扰资源匹配。
• 若不需要兼容旧版Chrome，升级到100及以上版本的Chrome即可，该排序匹配bug已经在后续版本修复。

注意：预加载的imagesrcset需要和img标签的srcset保持完全一致的排序，否则预加载的资源和img实际需要的资源不匹配，会导致重复加载。

内容的提问来源于stack exchange，提问作者kodfire