使用srcset与sizes实现响应式图片时的适配异常问题咨询

你的代码里有两个关键问题，导致图片无法按预期响应切换：

1. 语法错误：srcset末尾的多余逗号 #

你两次写的srcset都带了多余的尾逗号：

<img src="foo.webp" srcset="foo@sm.webp 325w," sizes="(min-width: 768px) 463px">

这个逗号会破坏srcset的语法结构，浏览器无法正确解析候选图片列表，直接忽略整个srcset规则，要么 fallback 到src属性的图片，要么出现不可预期的选择逻辑。

2. 对srcset/sizes机制的核心误解 #

要让浏览器正确匹配图片，必须满足两个前提：

• srcset要包含所有候选图的尺寸信息：每张图都得带上w单位的实际像素宽度，告诉浏览器这张图的真实大小。
• sizes要准确描述不同视口下图片的显示宽度：浏览器会根据这个显示宽度，结合设备像素比（DPR），计算出所需的像素总量，再从srcset里挑选最匹配的图片。

正确实现代码 #

<img 
  src="foo@sm.webp" 
  srcset="foo@sm.webp 325w, foo.webp 463w" 
  sizes="(max-width: 767px) 325px, 463px"
  alt="图片描述文本"
>

代码说明： #

• src：作为降级备用，当浏览器不支持srcset时加载小图（也可以设为大图，根据你的需求调整）。
• srcset：列出两张候选图，分别标注它们的实际像素宽度（325w对应小图，463w对应大图）。
• sizes：
  • 当视口宽度≤767px时，图片显示宽度为325px；
  • 视口宽度≥768px时，图片显示宽度为463px。
• 浏览器会自动根据当前视口匹配sizes规则，计算所需像素量，从srcset中选择最适合的图片。

补充说明（关于DPR） #

如果你的设备是高像素密度屏（比如2x、3x屏），浏览器会计算显示宽度×DPR的像素需求。比如2x屏的手机，视口≤767px时，需要325px×2=650px的图片，但你的小图只有325px宽，这种情况下浏览器会自动选择更大的463px图（因为它是最接近需求的选项）。如果想要高DPR设备在小视口也用适配的图，你需要补充对应密度的图片（比如foo@sm-2x.webp，宽度650w）。

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