页面中img标签的srcset属性未生效的原因是什么？

核心原因 #

• sizes属性单位使用错误：w单位仅可在srcset中用于标注图片资源的实际物理宽度，sizes属性的长度值必须使用px、vw、%等标准CSS长度单位，禁止使用w。你当前代码中sizes里的750w、2880w属于非法值，浏览器会直接忽略整个sizes属性，默认按图片渲染宽度为100vw计算所需资源宽度，结合设备像素比后很容易直接匹配到更大的2880w资源。
• 缺少移动端视口配置：若页面头部没有添加<meta name="viewport" content="width=device-width, initial-scale=1.0">元标签，移动端浏览器会默认使用980px宽度的虚拟视口，max-width: 767px的媒体查询永远无法触发，浏览器始终按大屏规则加载图片。
• 浏览器缓存策略影响：如果之前访问页面时已经加载过2880w的大图，浏览器会优先复用缓存中的高分辨率资源，不会重复下载更小的同内容图片，可清空浏览器缓存后再测试验证。

修正后的代码示例 #

假设头图在移动端、桌面端均为满屏宽度，修正后代码如下：

<img 
      srcset="images/mobile/image-header-750w.jpg 750w,
              images/desktop/image-header-2880w.jpg 2880w"
      sizes="(max-width: 767px) 100vw,
              100vw"
      src="images/desktop/image-header-2880w.jpg" 
      alt="" 
      class="header-banner">

如果桌面端头图最大渲染宽度为2880px，可将sizes的默认值改为2880px即可。

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