使用srcset属性时浏览器下载多张图片是否为正常行为？

你编写的HTML标记代码如下：

<img srcset="https://res.cloudinary.com/xxx/image/upload/c_scale,w_300/v1653408278/notforsquares/ll/DSCF4429.jpg 300w, https://res.cloudinary.com/makingthings/image/upload/c_scale,w_600/v1653408278/notforsquares/ll/DSCF4429.jpg 600w" sizes="(min-width:300px) 50vw 100vw" src="https://res.cloudinary.com/makingthings/image/upload/v1653408278/notforsquares/ll/DSCF4429.jpg" alt="Lamp" />

浏览器网络面板显示两张图片被下载属于正常的预期行为，不是代码错误，出现这个情况主要有两个常见原因：

• 浏览器预加载兜底逻辑：现代浏览器解析img标签时，会优先对src属性配置的兜底图片发起预请求，之后再根据当前视口宽度、屏幕像素比（DPR）、sizes定义的尺寸规则，从srcset列表中匹配最适合当前场景的图片资源，发起第二次请求。不支持srcset属性的老旧浏览器只会加载src对应的单张资源，不会触发额外请求。
• 测试环境配置影响：如果开启了开发者工具的「禁用缓存」开关、测试过程中拖动调整过浏览器窗口大小、或者在高分辨率Retina屏幕下做测试，浏览器会重新计算最优图片分辨率，也会触发两次资源加载。

额外排查提示：你代码里300w规格的图片cloudinary账号标识为xxx，和另外两个资源的makingthings账号不一致，如果这个路径是无效地址，浏览器加载300w资源失败后回退加载src兜底资源，同样会出现两次请求记录，建议先核对该路径配置是否正确。

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