# Cursor 响应式图片：按屏幕选对 srcset，手机少下载又保持清晰

浏览器冷上下文实读currentSrc，390px DPR1选400图，桌面与390px DPR2选800图；过大sizes选1600图。

## 环境



## 启动

~~~sh
cd reference
python3 -m http.server 8787
~~~

## 七步操作

1. 准备多尺寸原图

输入是一份原创几何场景，生成400、800和1600像素三个候选；图片真实像素不同，文件名不是伪装的小图。保留源图方便核对。

2. 声明候选宽度

img使用宽度描述符srcset，并声明固定宽高保持布局。srcset提供候选，但并不强迫浏览器在手机总是选择最小文件。

3. 按容器写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账号生成未运行。

## 目录身份

- starter：待完成的任务接口与原创输入，TODO不是已完成实现。
- reference：作者原生完成参考和实际产物。records.json/browser-result.json为本地实测记录，不是AI助手回复。
- TASK.md：可交给相应AI助手的原始任务合同。该助手账号生成会话未运行。

## 依赖与许可

原创教学代码以MIT许可提供。第三方项目、模型及浏览器遵循其自身许可。第三方依赖由本地安装获取，不包含node_modules、模型权重、WASM运行时、数据库、缓存或凭据。

## 官方依据

- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#srcset