<img> 的 width/height 不可省略，否则触发布局偏移；sizes 必须写在 <img> 上并精准匹配 CSS 渲染宽度；srcset 与 sizes 需搭配使用 w 描述符，x 描述符仅用于固定尺寸图。
picture 里 img 的 width/height 属性为什么不能省
浏览器在解析 <picture> 时，不会从 <source> 推导尺寸，所有尺寸决策都落在最终渲染的 <img> 上。如果漏掉 width 和 height，页面会先占位 0×0，等图片加载完才重排，引发 layout shift（CLS 值飙升）。
必须显式写死数值（单位是纯数字，不带 px）：
-
width和height按设计稿原始比例填，比如缩略图固定 300×180，就写width="300" height="180" - 配合 CSS 控制实际显示大小：用
style="max-width: 100%; height: auto;"保持比例缩放 - 表格或栅格中要算准渲染宽度——三列卡片每张图占约 33vw，但
sizes仍需按实际 CSS 宽度写，不是靠width/height推导
sizes 属性到底该写在哪、怎么写才生效
sizes 只对 <img> 有效，写在 <source> 上会被完全忽略。它的作用不是“设置尺寸”，而是告诉浏览器：“这张图在不同视口下，CSS 渲染宽度大概是多少”，浏览器再结合设备 DPR 算出要加载多大物理分辨率的图。
常见错误写法：sizes="100vw" —— 这在桌面端会导致加载远超需要的大图（比如 3840w 图只用来显示 600px 宽）。
立即学习“前端免费学习笔记（深入）”；
正确写法示例（新闻列表缩略图）：
<img src="thumb-fallback.jpg" srcset="thumb-400w.jpg 400w, thumb-800w.jpg 800w, thumb-1200w.jpg 1200w" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 300px" alt="新闻配图">
含义：
- 小屏（≤768px）：图占满视口 → 浏览器按
100vw × DPR查srcset中最接近的 w 值 - 中屏（769–1200px）：三列布局，每张图约占 33vw
- 大屏（＞1200px）：固定 300px 宽，不再随视口变
用 x 描述符还是 w 描述符？别混着来
srcset 里只能二选一：x 描述符适用于固定宽高的图（如 logo、icon），w 描述符必须配 sizes，用于响应式布局。混用会导致浏览器无法解析，直接跳过整个 srcset。
判断依据很简单：
- 你的图在页面中宽度是否随断点变化？是 → 用
w + sizes - 图始终是 120×120 像素，只换清晰度？→ 用
logo-1x.png 1x, logo-2x.png 2x - 千万别写成
srcset="logo-1x.png 1x, thumb-800w.jpg 800w"，这种写法无效
media 查询顺序和兜底逻辑怎么影响尺寸表现
<source> 是从上到下匹配，第一个 media 条件为真就停，后面全忽略。这意味着尺寸控制不仅取决于你写了什么，还取决于你写的顺序。
比如下面这段代码，在 iPad（768px 宽、DPR=2）上会加载 hero-mobile.jpg 而不是更合适的桌面图：
<picture> <source media="(max-width: 768px)" srcset="hero-mobile.jpg"> <source media="(min-width: 768px)" srcset="hero-desktop.jpg"> <img src="hero-fallback.jpg" alt="..."> </picture>
问题出在 (max-width: 768px) 匹配了 iPad，但 iPad 实际应走桌面逻辑。修复方式：
- 把断点写成互斥且有间隙：
(max-width: 767px)和(min-width: 768px) - 或者用
(max-width: 480px)/(min-width: 481px) and (max-width: 1024px)/(min-width: 1025px)分层 - 最后的
<img>必须有src，否则无匹配时会空白；它也要带sizes和srcset，否则高 DPR 设备可能模糊
真正难的不是写对语法，而是把设计稿里的“这张图在各种设备上实际渲染多宽”翻译成精确的 sizes 字符串——这里差 5vw，高 DPR 屏就可能加载错一张图。
