responsive-image-contracts

用途：审查响应式图片标记与实际渲染结果、加载优先级之间是否一致。语法合法性由 linter 负责，本技能负责 linter 判断不了的取舍：按角色选尺寸（hero、网格单元、缩略图）、LCP 加载优先级、sizes 是否匹配真实 CSS 布局，以及浏览器最终下载了哪个候选文件。\n\n主要检查项：w 描述符 srcset 缺少 sizes 会让浏览器按 100vw 下载最宽候选；sizes 必须匹配实际布局而非猜测，100vw 用在三列网格（约 33vw）会过量下载约 3 倍；内在宽度描述符须等于文件真实解码宽度；LCP/hero 图不能 loading="lazy"，应用 loading="eager"（或省略）加 fetchpriority="high"，但每页 high 控制在 1-2 个；每个 img 需要 width 与 height 属性（或预留 aspect-ratio）以避免 CLS；候选宽度过少无法覆盖 DPR 2-3 与宽屏；描述符类型要与意图匹配，w 配 sizes，x 用于固定显示尺寸；picture 用于美术方向与格式回退而非分辨率切换；sizes="auto" 仅在 loading="lazy" 时有效，eager 图会回退 100vw。\n\n使用方式：先用机械 linter（RespImageLint、W3C Nu Html Checker、Markuplint invalid-attr、eslint-plugin-layout-shift）排除语法与缺失属性，再用本技能做判断；可用 DevTools 的 currentSrc 或 Network 面板确认真正下载的候选。\n\n适用场景：前端图片性能评审、LCP 优化、CLS 排查、srcset/sizes 缺陷定位。\n\n限制：不负责整页 Core Web Vitals 预算（JS/CSS、字体、TTFB、非图片 LCP）；不处理设计还原的视觉漂移与本地化文案；仅报告有真实用户可见代价、契约可证明不一致、修复范围窄且 linter 未覆盖的问题；框架图片组件需先查看生成输出再判定。