srcset 必须与 sizes 配合使用，否则浏览器默认按 100vw 计算渲染宽度，易加载远超需要的高清图；sizes 提供布局宽度，浏览器据此从 srcset 中选取最匹配源；混用 w 和 x 单位将导致整条 srcset 失效。
srcset 和 sizes 必须一起用，光写 srcset 不配 sizes，浏览器大概率会加载远超需要的高清图——比如手机上加载 1200w 的图，缩成 375px 显示，浪费带宽又拖慢首屏。
为什么 srcset 单独写没用
浏览器靠 sizes 算出图片在页面中的「渲染宽度」，再从 srcset 列表里挑最接近且不小于该宽度的源。不提供 sizes，浏览器默认按 100vw 计算，哪怕你只给了一张 400px 宽的图，它也可能选 800w 或 1200w 的版本。
-
srcset="img-400w.jpg 400w, img-800w.jpg 800w"+sizes="(max-width: 480px) 100vw, 50vw"：手机下算得渲染宽 ≈ 400px，选 400w；桌面下算得 ≈ 600px，选 800w -
srcset里混用400w和2x？整条属性被忽略，退化为只加载src -
sizes值里媒体查询带空格（如(max-width: 768px)）在旧版 Edge 中会失效，建议写成(max-width:768px)
<picture></picture> 不是可选项，是构图或格式强需求时的唯一解
当你要的不是“同一张图缩放”，而是“不同屏幕展示不同裁剪/不同比例/不同格式”时，<picture></picture> 是必须的。它不替代 <img>，而是包裹它。
- 艺术方向切换：移动端只留人脸，桌面端展示全景 →
<source media="(max-width:480px)" srcset="face.jpg"></source> - 格式回退：优先加载
webp，老浏览器降级到jpg→<source type="image/webp" srcset="a.webp"><source type="image/jpeg" srcset="a.jpg"><img src="a.jpg" alt=""></source></source> -
<source></source>必须写在<img>前面，顺序错就完全不生效 -
media断点要和 CSS 实际布局断点一致，比如 CSS 用@media (min-width: 769px)，<source></source>就别写成768px
src 是兜底项，不是可选配置
src 属性必须存在，且应指向最小尺寸或最兼容的图。它不是“备用”，而是浏览器解析失败、JS 未执行、低带宽或旧环境下的最后防线。
- IE11 及更早版本不支持
srcset，全靠src显示 - 设
src="photo-400w.jpg"比设src="photo-1200w.jpg"更安全：小图加载快，不会因网络差卡住整个页面 -
alt不能省，无障碍和 SEO 都依赖它；空alt=""也比没写强
sizes 的值必须真实反映图片在布局中的占位宽度——不是你“希望它多宽”，而是 CSS Grid / Flex / 浮动实际让它占多少。写错一个断点，整套响应式逻辑就偏了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
