直接答案:粘贴一段 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 背景图只读标签与属性

选图公式

  1. 槽位:sizes 命中的长度,缺省按 100vw;390px 视口即 390px。
  2. 目标像素:槽位 × DPR。390px @2x = 780px;1440px @1x = 1440px。
  3. 选择:候选宽度里取最小的 ≥ 目标;都比目标小则取最大。密度描述符按 DPR 选。
  4. 浪费:选中宽度 > 目标 × 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 项自检。

关于作者

凌壹信息Official(交付团队),负责企业网站、品牌与智能制造项目的需求梳理、方案与验收协作。本文工具只解析 HTML 标签与简化媒体查询,不替代真机测试。

先声明,再排版

viewport 决定手机按什么宽度渲染;声明错了,后面的字号、触控与对比度都会被放大。

预约内容验收方案