响应式图片srcset占屏幕宽25%时加载过大资源问题求助

你使用srcset的宽度描述符（w后缀）时，缺失了必填的sizes属性配置。浏览器在没有sizes的情况下会默认采用100vw（即图片占满整个视口宽度）作为计算基准，结合设备像素比（DPR）选择资源：比如360px宽度的3倍屏设备，会计算得到需要360*3=1080px宽度的图片，自然会选择最接近的1120w规格的资源，和你实际100px的渲染宽度完全不符。

• 第一步：给<source>标签补充sizes属性，明确告知浏览器图片的实际渲染宽度规则
  如果是响应式宽度，比如你当前场景下图片宽度约为视口宽度的25%，直接配置sizes="25vw"即可；如果是固定宽度渲染，直接把sizes的值设为实际渲染的像素值即可，比如sizes="100px"。如果不同断点下图片宽度有变化，还可以配置带媒体查询的规则，修改后代码示例：

<picture class="background-image">
   <source type="image/jpeg" 
      srcset="http://localhost:61186/public/images/asia_1637411941_1920x1280.jpg 1920w,
              http://localhost:61186/public/images/asia_1637411941_1720x1147.jpg 1720w,
              http://localhost:61186/public/images/asia_1637411941_1520x1013.jpg 1520w,
              http://localhost:61186/public/images/asia_1637411941_1320x880.jpg 1320w,
              http://localhost:61186/public/images/asia_1637411941_1120x747.jpg 1120w,
              http://localhost:61186/public/images/asia_1637411941_920x613.jpg 920w,
              http://localhost:61186/public/images/asia_1637411941_720x480.jpg 720w,
              http://localhost:61186/public/images/asia_1637411941_520x347.jpg 520w,
              http://localhost:61186/public/images/asia_1637411941_320x213.jpg 320w"
      sizes="25vw">
    <img src="http://localhost:61186/asia_1637411941_1920x1280.jpg" alt="Asia" />
</picture>

• 第二步：修正MIME类型，把type="image/jpg"改为标准的type="image/jpeg"，避免部分浏览器识别异常
• 第三步：确认CSS配置，确保<img>标签的宽度规则和sizes定义一致，比如设置img {width: 100%; height: auto}，避免图片实际渲染宽度和sizes声明不匹配

修改后在Chrome无痕模式下刷新页面，打开开发者工具的网络面板，即可看到浏览器会按实际渲染宽度选择对应规格的图片，重新跑Lighthouse检测后「properly size the images」的提示会消失，性能评分会对应提升。

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