响应式图片通过srcset（含x描述符）、media和type属性协同工作，由浏览器依据设备DPR、视口宽度及格式支持自动选择最适配资源；<picture>为容器，<source>按顺序匹配条件，未命中则回退至<img>默认图。
按设备像素比（DPR）加载高清图
当目标是让Retina屏显示更清晰的图（比如2x/3x图），核心是用的srcset + x描述符，picture只是规范容器：
- 准备等比例图片：基础图400×300，对应@2x图必须是800×600，@3x图是1200×900；尺寸不对，高DPR下仍会模糊
-
img的srcset写法要统一用x：例如
srcset="photo@1x.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"，浏览器自动按当前DPR选最接近的 - source也可配合media做分层：比如小屏只提供1x和2x，桌面提供1x/2x/3x，避免手机加载超大图
按视口宽度适配不同尺寸图
适用于响应式布局中图片显示宽度变化大的场景（如Banner在手机占满屏、桌面只占半屏）：
-
每个
加media属性 ，例如media="(max-width: 480px)"对应手机，media="(min-width: 768px)"对应桌面 -
同一
内srcset可混合w或x，但不能混用 ：要么全用400w, 800w（按布局宽度算），要么全用1x, 2x（按DPR算） -
务必按匹配强度从窄到宽排序：先写
max-width: 480px，再写min-width: 481px，否则高分辨率手机可能错配成桌面图
优先加载现代格式（WebP/AVIF）并降级
减小体积的同时保持清晰度，尤其对高DPR设备效果明显：
-
用type属性声明格式：
<source srcset="photo.avif" type="image/avif">，浏览器跳过不支持的格式 - 按兼容性降序排列source：AVIF → WebP → JPG，首个支持的即被采用，无需JS判断
- img的src必须存在且为通用格式（如JPG），它是所有老浏览器的最终兜底
必须注意的细节
很多失效问题其实源于几个硬性规则：
立即学习“前端免费学习笔记（深入）”；
- source按顺序匹配，只取第一个满足的，不叠加、不回退；未匹配才走img
- img必须带src和alt，漏掉src会导致所有浏览器 fallback 到空白或404
-
显式设置width/height属性（如
width="400" height="300"），防止高DPR图加载时引发布局偏移（CLS） - 验证方式简单有效：Chrome DevTools → Network → 切换Device Toolbar（如iPhone 14 Pro），看实际请求的是@1x还是@3x文件
