展开本页目录
开始前准备什么
- 下载本题完整练习包，区分待实现 starter 与作者完成 reference。
- 按README准备本题原生依赖；所有输入均为原创或明确标注的本地fixture。
- 本地练习不需要付费模型Key；真实模型调用未执行，MiniLM题另有明确实际推理说明。
- 准备多尺寸原图
- 声明候选宽度
- 按容器写sizes
- 读取实际选图
- 复现过大sizes
- 比较视口与DPR
- 保存传输记录
原创输入、待完成starter、作者reference及实际运行产物，依README本地准备依赖。
环境要求、具体操作、产物核对与未运行范围。
1. 准备多尺寸原图
输入是一份原创几何场景，生成400、800和1600像素三个候选；图片真实像素不同，文件名不是伪装的小图。保留源图方便核对。
2. 声明候选宽度
img使用宽度描述符srcset，并声明固定宽高保持布局。srcset提供候选，但并不强迫浏览器在手机总是选择最小文件。
本地启动与复现
cd reference
python3 -m http.server 87873. 按容器写sizes
按实际容器写sizes：窄屏扣除两侧留白，桌面容器最大640px。不要把整屏100vw当作所有图片的显示宽度。
4. 读取实际选图
在冷启动浏览器上下文读取currentSrc、naturalWidth、clientWidth和devicePixelRatio。实际下载哪张图要读浏览器结果，不能只看HTML里写了哪些候选。
5. 复现过大sizes
故意把sizes写为1800px，浏览器选择1600图。即使随后缩小声明，已有大图也可能被缓存复用，所以对照修复需重新建冷上下文。
6. 比较视口与DPR
分别验证390px DPR1、桌面DPR1和390px DPR2。参考分别选择400、800、800像素候选，符合实际显示宽度与设备像素密度需求。
7. 保存传输记录
保存独立上下文的资源选择记录与原图。网络缓存、节流和浏览器策略会影响选图，作者只报告本次真实Chromium结果；Cursor账号生成未运行。
怎样确认已经完成
- 浏览器冷上下文实读currentSrc，390px DPR1选400图，桌面与390px DPR2选800图；过大sizes选1600图。
- 可以，用真实多宽度候选配合srcset和实际容器sizes。DPR较高的手机也可能合理选择中等尺寸。
- 可能sizes把显示宽度报得过大，或浏览器已缓存大图。读取currentSrc并在冷上下文比较，本题1800px声明确实选1600图。
常见问题
同一张网页图片，手机能不能自动下载小一点的版本？
可以，用真实多宽度候选配合srcset和实际容器sizes。DPR较高的手机也可能合理选择中等尺寸。
写了srcset为什么浏览器还是下载最大图？
可能sizes把显示宽度报得过大，或浏览器已缓存大图。读取currentSrc并在冷上下文比较，本题1800px声明确实选1600图。
哪些部分实际运行，哪些需要独立验证？
浏览器冷上下文实读currentSrc，390px DPR1选400图，桌面与390px DPR2选800图；过大sizes选1600图。 目标AI助手账号生成、云平台部署和生产环境不在本次执行范围。