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
• 必须有兜底的 标签，否则无图显示（且该 不参与响应式选择，仅作 fallback）
• 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+ 才开始支持对 的原生懒加载（旧版 Safari 会忽略该属性）
• 不要在 上加 loading —— 它只对 有效
• 如果使用 JS 懒加载库（如 lazysizes），确保它读取的是 data-srcset 而非 srcset，否则原生响应式逻辑会被绕过

最简安全写法：

@@##@@

实际项目里最容易被忽略的是 sizes 的动态性——它写死在 HTML 里，一旦布局用 CSS Grid/Flex 改变图片容器宽度，sizes 就可能严重失准。这时候要么用 JS 动态改 sizes 属性，要么改用 container query 配合 image-set()（CSS 级方案，目前仅 Safari 17.4+ 支持）。