直接答案:粘贴一段 HTML,工具在浏览器本地统计 img/srcset/sizes/picture,并按 390@2x 与 1440@1x 模拟候选图选择:缺 sizes、无 780/1440 候选、重复宽度、缺宽高都会标出。不联网、不上传,可导出 CSV。
粘贴 HTML,检查图片
把页面 HTML 或一段图片代码粘到下面。工具只看标签与属性,不加载图片;结果用于上线前筛查。
尚未检查。
内置自检运行中…
判定口径
| 指标 | 判定 | 边界 |
|---|---|---|
| srcset | 解析 w/x 描述符与候选数 | 无描述符候选忽略 |
| sizes | 缺 sizes 且用 w 描述符 → 提示 | 仅 x 描述符记 density-only |
| 候选覆盖 | 700–900w 与 1300–1600w 各至少一张 | 不是唯一正确档位 |
| 选图 | 槽位 × DPR → 选最小 ≥ 目标的候选 | 超过最大候选时取最大 |
| 浪费 | 选中宽度 > 目标 1.5 倍 | 只对 390@2x 统计 |
| 不判断 | 图片质量、格式、LCP、CSS 背景图 | 只读标签与属性 |
选图公式
- 槽位:
sizes命中的长度,缺省按100vw;390px 视口即 390px。 - 目标像素:槽位 × DPR。390px @2x = 780px;1440px @1x = 1440px。
- 选择:候选宽度里取最小的 ≥ 目标;都比目标小则取最大。密度描述符按 DPR 选。
- 浪费:选中宽度 > 目标 × 1.5 记一次;例如 2,880w 塞进 780px 目标。
用上一轮数据做背景
2026-11-11 对 25 个装备企业首页的实测里,只有 1 站用 picture/source,0 站用 img[srcset];390px 与 1440px 的首屏图片字节中位几乎相同(1,152 KB 对 1,145 KB)。这个工具就是用来在源码层快速找出“缺 sizes、无 780/1440 候选”的页面,详见首页首屏图交付实测。
局限
- 只读 HTML:不执行 JS、不加载 CSS 背景图、不测真实网络字节。
- 简化媒体查询:只支持 min/max-width 的 and 组合;容器查询、calc、resolution 未实现。
- 不模拟 source 优先级:
picture只计数,选图按img的 srcset。 - 不是真机:缓存、Save-Data、格式支持与设备像素比都可能让浏览器选到别的候选。
- 阈值可讨论:780/1440 是常见两档,不是唯一答案;工具只做筛查。
数据与复算
解析与选图代码:js/responsive-image-check.js;Node 断言:scripts/test_responsive_image_check.js(19 项)。页面内置 3 项自检,打开 #sample 会自动填入示例。需要把检查写进验收?见网站建设服务。
常见问题
工具会上传 HTML 吗?
不会。解析全在浏览器本地完成,没有网络请求;CSV 也由本页生成。
sizes 支持哪些媒体条件?
支持 min-width/max-width 的 and 组合,以及 px/vw/rem/em 长度。容器查询、calc、方向与分辨率条件不在内,遇到未知条件会跳过该条。
模拟选图和浏览器一定一致吗?
不一定。工具按 390@2x 与 1440@1x、固定 sizes 与候选宽度模拟;浏览器还会考虑缓存、Save-Data、格式支持、art direction 与设备像素比。结果用于筛查,不替代真机。
为什么提示“无 780/1440 候选”?
390px 槽位在 2 倍屏需要 780px,1440px 桌面槽位需要 1440px。工具把 700–900w 与 1300–1600w 作为两档覆盖检查,不是唯一正确值。
picture/source 会分析吗?
会统计 picture 数量与 source[srcset] 数量;候选选择按 img 的 srcset 模拟,不评估 source 的 media/type 优先级。
能查 CSS 背景图吗?
不能。工具只解析 HTML 标签;背景图、canvas 与 video poster 需要浏览器实测或桌面工具。
有测试吗?
有。解析与选图公式在 js/responsive-image-check.js,Node 断言在 scripts/test_responsive_image_check.js(19 项),页面内置 3 项自检。