srcset 与 sizes 协同生效：sizes 定义视口宽度条件下的目标显示宽度，浏览器据此结合设备 DPR 从 srcset 的 w 值中选取最匹配图片；必须配对使用，且 sizes 需含媒体条件与宽度描述符，srcset 中须统一用 w 单位。
img 标签的 srcset + sizes 属性怎么配才生效
浏览器是否按屏幕密度或视口宽度加载对应图片，取决于 srcset 和 sizes 是否协同正确。只写 srcset 不写 sizes，浏览器会默认按 100vw 计算，容易在窄屏下仍加载大图。
关键点：
-
sizes值必须是媒体条件 + 宽度描述符的组合，例如(max-width: 768px) 100vw, 50vw，不能只写100vw -
srcset中每个图像后必须带w单位（如small.jpg 480w），不能混用x（如2x）和w，除非你明确只适配设备像素比 - 浏览器按
sizes计算出「目标显示宽度」，再结合设备 DPR，从srcset中选最接近的w图像
@@##@@
picture 元素中 source 的 media 属性匹配逻辑
webp，不支持时回退到 jpg。它的匹配是「从上到下第一个满足 media 的
常见陷阱：
-
media是 CSS 媒体查询语法，不是 JS 表达式，不能写media="width - 必须有兜底的
-
type属性必须是标准 MIME 类型，如image/webp，写成webp或.webp会失效
@@##@@
如何验证浏览器实际加载了哪张图
靠肉眼或文件名判断不可靠——浏览器可能因缓存、网络条件、用户设置（如“节省数据”模式）跳过高分辨率资源。真实加载路径必须查 Network 面板。
操作建议：
- Chrome DevTools 中打开 Network → Filter 输入
img，刷新页面，看请求的 URL 和 Response Headers 中的content-length - 禁用缓存（勾选 Disable cache），避免旧资源干扰
- 用 Device Toolbar 切换不同预设尺寸（如 iPhone SE / iPad Pro），再刷新，观察 srcset 选择是否变化
- 在 macOS Safari 中可启用 Develop → Enter Responsive Design Mode，它会显示当前计算出的
sizes值
懒加载（loading="lazy"）与响应式图片能否共存
可以共存，但顺序和兼容性要注意：loading="lazy" 是 HTML 属性，不影响 srcset 逻辑，浏览器仍会在懒加载触发前完成资源选择。
需注意：
- 所有现代浏览器都支持
loading="lazy"，但 Safari 15.4+ 才开始支持对 - 不要在
loading—— 它只对
- 如果使用 JS 懒加载库（如 lazysizes），确保它读取的是
data-srcset而非srcset，否则原生响应式逻辑会被绕过
最简安全写法：
@@##@@实际项目里最容易被忽略的是
sizes 的动态性——它写死在 HTML 里，一旦布局用 CSS Grid/Flex 改变图片容器宽度，sizes 就可能严重失准。这时候要么用 JS 动态改 sizes 属性，要么改用 container query 配合 image-set()（CSS 级方案，目前仅 Safari 17.4+ 支持）。
