srcset中像素密度描述符（x）和宽度描述符（w）不可混用，混用会导致浏览器忽略整个srcset而退化为仅加载src；正确用法是w描述符必须配合sizes属性，且sizes需准确反映图片在各断点下的渲染宽度。
srcset 里像素密度描述符和宽度描述符不能混用
浏览器解析 srcset 时，会根据你用的是 x 还是 w 来切换匹配逻辑——前者看设备像素比（如 2x），后者看视口宽度（需配合 sizes）。混写会导致部分浏览器直接忽略整个属性，图片退化为仅加载 src。
- ✅ 正确（
w描述符 +sizes）：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - ❌ 错误（混用）：
srcset="small.jpg 1x, medium.jpg 768w"—— 浏览器不识别这种混合语法 - ⚠️ 注意：
sizes的值必须是媒体条件 + 长度单位组合，不能写成100%或纯数字；长度单位只支持vw、px、em等，不支持%
sizes 属性不是“告诉浏览器该用哪张图”，而是“告诉浏览器这张图在页面中占多宽”
sizes 的作用是提前告知浏览器：在不同断点下，这张图片最终渲染的宽度是多少。浏览器靠这个估算出需要下载多大尺寸的资源，再结合 srcset 中的 w 值选最接近的一张。它不控制布局，也不替代 CSS 宽高设置。
- CSS 设置了
width: 100%; max-width: 400px;？那sizes应该写成sizes="(max-width: 400px) 100vw, 400px" - 如果图片放在栅格系统里占 1/3 宽度，且栅格最小断点是 768px，则可写
sizes="(max-width: 768px) 100vw, 33.33vw" - 漏写
sizes且用了w描述符 → 浏览器无法计算目标宽度，降级为使用第一张图或按src加载
响应式图片在 Safari 和旧版 Edge 中的兼容性陷阱
srcset + sizes 在 Chrome/Firefox/Edge(Chromium) 中表现一致，但 Safari 直到 12.1 才完整支持 w 描述符的动态选择逻辑；更早版本（如 iOS 11）会忽略 sizes，只按设备像素比粗略匹配 x 描述符。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 如果你必须支持 iOS 11–12.0，建议 fallback 到
picture+media，例如：<picture> <source media="(max-width: 480px)" srcset="small.jpg"> <source media="(max-width: 768px)" srcset="medium.jpg"> <img src="large.jpg"> </picture>
- 旧版 Edge（EdgeHTML）对
sizes解析有 bug：当媒体条件含空格（如(max-width: 768px)）时可能失效，建议统一写成无空格格式(max-width:768px) - 所有现代浏览器都支持
srcset的x描述符，但仅靠它无法实现基于视口宽度的精确资源选择
不要用 JavaScript 动态改写 srcset 来“优化”加载时机
有些方案试图等 DOM 加载完再根据 getBoundingClientRect() 算出图片宽度，然后注入 srcset。这看似精准，实则破坏了浏览器原生的预加载机制——<img> 标签在 HTML 解析阶段就会被预加载器发现并发起请求，而 JS 注入发生在 DOM 构建后，至少晚几百毫秒，反而拖慢首屏图片。
立即学习“前端免费学习笔记（深入）”；
- 预加载器看不到 JS 写入的
srcset，所以不会提前请求任何图片资源 - 如果图片在视口外，懒加载场景下更不该用 JS 控制
srcset，应直接用loading="lazy"+ 原生srcset - 真正需要 JS 干预的，只有极少数情况：比如图片宽高由 Canvas 渲染结果决定，或服务端完全无法提供多尺寸资源时做客户端缩放
sizes 必须严格对应 CSS 实际占用空间；srcset 的 w 值最好和你实际生成的图片宽度完全一致，差几个像素都可能导致选错档位。 
