srcset中不同尺寸图片应写为“路径 400w, 路径 800w”格式，w代表图源固有像素宽，不可用px或x；需配合sizes指定布局宽度，src为必需降级兜底。
srcset 里怎么写不同尺寸的图片地址
直接在 srcset 属性中用逗号分隔多个「图片路径 + 宽度描述符」，每个单元格式是 图片路径.jpg 400w，其中 400w 表示这张图源的**固有宽度（intrinsic width）**，不是屏幕宽度，也不是显示宽度。
常见错误是写成 400px 或 400x —— 浏览器会直接忽略整个 srcset 值，退回到 src。
-
srcset中的w描述符必须对应图片文件的真实像素宽（比如一张图导出为 800×600，就写800w） - 多个描述符建议按宽度从小到大排列，虽然不是强制，但可读性和调试更直观
- 不要混用
w和x（如2x），二者语义冲突；x描述设备像素比，w描述图源尺寸，选一种即可，响应式场景优先用w
怎么配合 sizes 属性让浏览器算对显示宽度
sizes 不是告诉浏览器“用哪张图”，而是告诉它“这张图在当前页面布局下大概会显示多宽”。没有 sizes，浏览器只能按 100vw 猜，容易选错图源。
例如图片在移动端占满屏、桌面端固定 300px 宽，可以写：sizes="(max-width: 768px) 100vw, 300px"。浏览器会先匹配媒体条件，再把匹配到的值（如 300px）作为目标显示宽度，结合 srcset 中各图源的 w 值，选出最接近且不浪费带宽的那张。
立即学习“前端免费学习笔记（深入）”；
- 如果
sizes写成100vw却没做响应式布局，图片实际只显示 200px，浏览器仍可能加载 1200w 的图 -
sizes中不能写百分比（如50%），只接受px、vw、em等绝对或视口单位 - 可以用
calc()，比如sizes="calc(100vw - 2rem)"，但需确保所有浏览器支持（Chrome 67+/Firefox 63+）
src 是降级兜底，不是可选项
src 属性是 <img alt="HTML怎么通过srcset定义多尺寸图片并预留降级规则" > 的必需属性，也是 srcset 的默认回退：当浏览器不支持 srcset（如 IE11）、解析失败、或所有 srcset 图源都因网络策略被阻止时，就会加载 src 指定的图。
- 别为了“反正有 srcset”就把
src指向占位图或空 gif —— 这会导致不支持特性的旧环境无法显示内容 -
src应该指向一个可用、合理尺寸的图（比如 800w 左右的通用图），保证基础可用性 - 注意：如果用了
srcset+sizes，但忘了写src，部分浏览器（如 Safari）会直接不渲染图片，控制台也不报错
遇到图片不切换或加载错图怎么办
先打开开发者工具 → Network 面板，刷新页面，点开图片请求，看 Request Headers 里的 Sec-CH-DPR 和 Sec-CH-WIDTH（如果开启 Client Hints），或直接看浏览器最终发出的 URL 是否符合预期。更常用的是检查 Computed 标签页里的 currentSrc 属性值。
- 如果
currentSrc始终是src的值，说明srcset语法有误（比如写了400px）或sizes解析失败（比如写了无效媒体查询） - 如果 Chrome 开发者工具的 Network 面板里图片请求状态是
(inactive)，大概率是sizes返回了0px或非法值 - 用
picture元素做艺术指导（art direction）时，srcset降级逻辑不变，但每个source都要配自己的media和srcset，末尾img仍需src
真正容易被忽略的是 sizes 的计算时机——它在 HTML 解析阶段就确定，不随 JS 修改样式或窗口 resize 动态更新。所以别指望用 JS 改 style.width 后浏览器会重新选图；需要动态响应，得用 picture + JS 切换 source，或改用 CSS 背景图 + @media。
