学习前提
理解img、alt、相对路径和CSS宽度；准备多个尺寸的同一图片。
本课完成后你能做什么
区分分辨率选择与构图切换，说明浏览器为什么下载某张图片。
先理解机制
CSS宽度只改变显示尺寸，不一定降低下载字节。响应式图片让浏览器根据布局槽位、设备像素比和候选资源选择合适文件。srcset的w描述符必须写真实图片宽度，不是希望显示的宽度。准备同构图的480、960、1440像素文件后再配置，不能把同一个大文件重复声明成不同尺寸。
sizes描述图片在布局中占多宽，浏览器结合w候选做选择。它不是CSS规则，也不会直接把图片画成指定宽度。若容器最大720像素而sizes始终写100vw，宽屏上可能下载过大资源；布局和sizes应保持同一套尺寸假设。
picture用于构图或格式条件，source按顺序匹配，img负责最终图像语义与回退。手机需要裁剪人物近景、桌面需要宽幅环境时属于构图切换；仅更清晰不需要不同构图。替代文本描述内容作用，应放在img上。
声明width与height能让浏览器预留比例，CSS max-width:100%和height:auto保持缩放。非首屏图可考虑loading=lazy，首屏关键图不应盲目延迟。性能优化需观察实际下载与布局偏移，不能只看属性数量。
可运行示例
运行方式：将HTML示例保存为独立的.html文件并在浏览器打开；含脚本的示例使用现代浏览器。资源文件与多文件模块另按正文要求准备。
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>.photo{width:min(100%,720px)}.photo img{max-width:100%;height:auto}</style>
<figure class="photo">
<img src="images/workspace-960.jpg"
srcset="images/workspace-480.jpg 480w, images/workspace-960.jpg 960w, images/workspace-1440.jpg 1440w"
sizes="(max-width:760px) calc(100vw - 40px), 720px"
width="1440" height="960" alt="A workspace with a notebook beside a laptop">
<figcaption>Prepare three real image sizes before testing.</figcaption>
</figure>
</body></html>推演与验证
先准备指定尺寸的三张本地图片，保持3:2比例，并把页面body左右间距设为20px以匹配sizes假设。打开Network，禁用缓存后分别以375和1280像素重新加载；读取img.currentSrc及naturalWidth。设备像素比会影响结果，浏览器也可能保留已下载的大图，因此不要只拖动窗口就断言选择错误。
常见错误与边界
示例不附带图片素材，路径需要自行准备。不要混用同一srcset中的w与x描述符。断网或路径错误时，替代文本应有意义；尺寸声明不保证图片资源存在。
动手练习
为手机准备近景裁剪，用picture在600px以下选择；保留桌面srcset方案。记录两个宽度下的currentSrc、文件体积和视觉构图。
参考解法与理由
在img之前放带media条件的source，srcset指向手机裁剪；img继续承担回退、alt和尺寸。验收重点是小屏主体没有被裁掉，而不只是请求更小。