页面已使用过的图片触发srcset属性失效问题咨询

问题现象 #

在Windows（1x像素密度）设备上，页面中已提前加载过already_used_image.jpg的情况下，后续带有srcset的img标签本该选择1x的normal_image.jpg，却直接复用了缓存中的2x资源already_used_image.jpg；Mac（2x密度）设备上无此问题，仅发生在资源已被页面预加载的场景。

代码示例：

<!-- 页面中已提前加载的图片 -->
<img src="already_used_image.jpg">

<!-- 带有srcset的目标图片 -->
<img
srcset="already_used_image.jpg 2x, normal_image.jpg 1x"
src="fallback_image.jpg"
>

原因分析 #

这是浏览器的缓存复用优化行为：当already_used_image.jpg已被加载并存入缓存后，浏览器在处理后续srcset时，会优先复用已缓存的资源，而忽略srcset中定义的像素密度匹配规则——因为浏览器认为重复请求相同资源会浪费网络资源，所以直接用缓存里的内容，哪怕它对应的密度不匹配当前设备。

解决办法 #

• 使用差异化文件名（推荐）：为不同密度的图片设置不同文件名，比如将2x图命名为already_used_image@2x.jpg，确保缓存资源路径唯一，避免干扰1x资源的选择：

  <img src="already_used_image@2x.jpg">
  <img
  srcset="already_used_image@2x.jpg 2x, normal_image.jpg 1x"
  src="fallback_image.jpg"
  >
  

• 添加查询参数区分资源：给不同密度的图片添加唯一查询参数，让浏览器识别为不同资源，避免缓存复用：

  <img src="already_used_image.jpg?v=2x">
  <img
  srcset="already_used_image.jpg?v=2x 2x, normal_image.jpg?v=1x 1x"
  src="fallback_image.jpg"
  >
  

• 调整加载顺序：如果允许，将带有srcset的img标签放在预加载图片之前，让浏览器先按照srcset规则选择正确资源，再处理预加载的图片。

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