MDN关于srcset与sizes属性的内容是否存在矛盾？

这两处内容对应srcset的两种不同使用场景，核心区别在于描述符类型：

1. 宽度描述符（w）场景 #

当srcset中使用宽度描述符（例如img-400w.jpg 400w）时，必须搭配sizes属性使用，否则srcset会被浏览器忽略。

如果srcset属性使用宽度描述符，则必须同时存在sizes属性，否则srcset本身会被忽略。

原因是：宽度描述符仅告知浏览器图片的原始宽度，而sizes需要指定图片在当前页面布局中的显示宽度（例如sizes="(max-width: 600px) 480px, 800px"）。浏览器需要结合这两个信息，计算出当前场景下最适合加载的图片资源。

2. 密度描述符（x）场景 #

当srcset中使用密度描述符（例如img-2x.jpg 2x）时，不需要sizes属性。

这种情况下不需要sizes——浏览器会自行判断显示设备的分辨率，并提供srcset中最合适的图片。

原因是：密度描述符直接对应设备的像素比（DPR），浏览器只需根据当前设备的像素密度（比如2倍屏选2x图），就能选择匹配的图片，无需知道图片在页面中的显示尺寸。

简单总结：

• 用w描述符 → 必须配sizes
• 用x描述符 → 不需要sizes

两处文档针对的是不同的使用场景，因此不存在矛盾。

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