HTML img标签srcset配置未生效，无法按视口大小切换对应尺寸图片

问题原因 #

• 缺少viewport元标签：绝大多数移动设备的默认布局视口宽度为980px，若页面头部没有配置<meta name="viewport" content="width=device-width, initial-scale=1.0">，你设置的600px断点永远不会被触发，浏览器始终判定视口宽度大于600px，优先加载大图。
• 浏览器缓存优先策略：如果big.png已经被加载过，浏览器会默认复用清晰度更高的已缓存大图，不会因为视口变小重新下载小图，测试时如果不清缓存会一直看到大图。
• 高DPI设备的匹配规则：srcset的w描述符会结合设备像素比（DPR）计算所需图片像素值。比如2倍屏设备下，视口宽度小于600px时，图片展示宽度为400px，所需物理像素为400*2=800w，你提供的两张图分别为400w和700w，均未达到800w的要求，浏览器会选择相对更大的700w大图。

解决方法 #

1. 优先选择更可控的<picture>标签实现，完全按照视口断点强制切换，不受DPR和缓存逻辑干扰：

<picture>
  <source media="(max-width: 600px)" srcset="small.png">
  <img src="big.png" width="700" height="932" border="0" class="expimgbanners" alt="Let It Be">
</picture>

2. 如果要继续使用srcset+sizes方案，先做两个基础调整：
   • 在页面<head>标签中添加viewport配置：

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

   • 调整srcset参数适配高DPI设备，或者改用x描述符：

   <!-- 适配高DPI设备的w描述符写法 -->
   <img srcset="small.png 800w, big.png 1400w" sizes="(max-width: 600px) 400px, 700px" src="big.png" width="700" height="932" border="0" class="expimgbanners" alt="Let It Be">
   
   <!-- 固定DPR匹配的x描述符写法 -->
   <img srcset="small.png 1x, big.png 2x" sizes="(max-width: 600px) 400px, 700px" src="big.png" width="700" height="932" border="0" class="expimgbanners" alt="Let It Be">
   

3. 测试时请开启Chrome开发者工具的「禁用缓存」选项，切换视口后刷新页面再验证效果。

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