如何使用img标签srcset按屏幕分辨率显示不同图片

你的代码不生效核心是对srcset、sizes属性的规则理解偏差：

• srcset中路径后的w描述符，标记的是图片自身的固有像素宽度，不是触发切换的视口宽度阈值。你给500px宽的移动端图标了768w、给1370px宽的桌面图标了1024w，数值和图片真实宽度完全不匹配，浏览器计算选图逻辑时会直接出错。
• sizes的作用是告知浏览器：在对应媒体条件下，图片在页面中实际占据的布局宽度。你写的规则既没有覆盖≥1024px的视口场景，也没有对齐768px的切换断点，自然达不到预期效果。
• 补充说明：原生img+srcset的选图逻辑会自动参考设备像素比（DPR），如果是你这种移动端、桌面端图片比例完全不同（500x500正方形 vs 1370x200宽横幅）的场景，高DPI手机可能会加载更高分辨率的桌面图，要100%严格按断点切图更推荐用picture标签。

<img 
    srcset="banner_mobile.png 500w,
            banner_desktop.png 1370w"
    sizes="(max-width: 767px) 500px,
           1370px"
    src="banner_desktop.png"
    alt="test">

参数说明：

• srcset按图片真实宽度标注：移动端图实际宽500px标记500w，桌面端图实际宽1370px标记1370w
• sizes规则完全匹配你的需求：视口宽度<768px时图片布局宽度为500px，浏览器自动匹配对应移动端图；其余场景布局宽度为1370px，匹配桌面端图
• 保留src作为不支持srcset的旧浏览器兜底加载项

如果需要完全无视设备像素比强制按断点切图，用<picture>标签是最可靠的方案，不会出现高DPI移动端误加载桌面图的问题：

<picture>
    <source media="(min-width: 768px)" srcset="banner_desktop.png" width="1370" height="200">
    <img src="banner_mobile.png" alt="test" width="500" height="500">
</picture>

这个写法会严格执行媒体查询规则：视口宽度≥768px加载桌面横幅，<768px加载移动端方图，逻辑完全可控。

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