这是给网站交付需求使用的合成教学例，不是客户成果、真实账号测试或认证。
画面显示小，不代表下载文件也小
验收新作品集页面时，要求供应商在目标视口与像素密度下，展示实际图片请求。CSS尺寸不能说明下载了哪份资源；大图缩小显示，仍可能消耗大图流量。
| 资源 | 实际像素 | 用途 |
|---|---|---|
| bands-320.png | 320 × 160 | 较小候选 |
| bands-640.png | 640 × 320 | 后备与中等候选 |
| bands-1280.png | 1280 × 640 | 适合更大显示槽或像素密度的候选 |
运行填好的例子
下载有限规则Node检查器和已填写输入。使用Node 24或更新版本，不需要账号或API，也不联网。
node checks.mjs responsive-image-delivery responsive-image-delivery.jsonJSON输出资源清单与尺寸提示，但actualCurrentSrc仍为MUST_MEASURE_IN_BROWSER。请在本页检查样例图的currentSrc、网络响应及实际矩形。分别用390、768、1440 CSS像素测试，并记录devicePixelRatio；使用新上下文或注明缓存复用，之前的大图下载可能影响后续观察。
先约定验收，再宣称性能改善
浏览器根据可用信息选图，不能保证所有手机都下载320px版本。sizes是布局提示，应和真实图片槽比较；提供正确固有尺寸预留空间，并在最终布局检查加载行为。
三张色带按真实像素生成，不是压缩性能基准，也不证明LCP改善。正式图片还需核对细节质量及实测字节。本文只新增演示，不改主页大鸟、遮罩或任何旧图片。
官方依据与边界
MDN响应式图片：解释宽度候选与sizes提示；具体选择取决于浏览器和显示条件。
来源于2026年10月15日核验。输入与验收规则为原创教学设计；正式实施前还要核对当前平台版本及实际交付合同。