srcset需配合sizes才生效，否则浏览器默认按100vw匹配导致小屏加载大图；sizes必须真实反映CSS渲染宽度，通过媒体查询与像素值精确声明，缺单位、漏断点或不兜底均会失效。
srcset 和 sizes 是 HTML 响应式图片的基石，不配 sizes 的 srcset 大概率会失效——浏览器默认按 100vw 计算，小屏照样加载 1200w 图。
为什么写了 srcset 还是加载大图？
核心问题出在浏览器选图逻辑：它先看 sizes 算出图片“该占多宽”，再乘以设备 DPR（比如 iPhone 15 是 3x），最后从 srcset 中挑最接近且不小于该像素值的 w 图。
- 没写
sizes→ 浏览器 fallback 到100vw，视口 400px 也去加载 1200w -
sizes写成固定值如"50vw"→ 忽略所有断点，全尺寸统一按 50% 算 -
sizes漏掉关键断点，比如桌面端 CSS 设了width: 33vw，但sizes只写到900px→ 后续全部 fallback 到默认行为 - 父容器有
max-width: 600px，但sizes没约束 → 浏览器仍按视口全宽算，导致选图过大
sizes 怎么写才匹配真实布局？
sizes 不是“最大宽度”，而是“这张图在当前布局下**实际渲染宽度**的提示”。必须和 CSS 中图片容器的宽度逻辑严格对齐。
- 如果图片在移动端占满父容器（
width: 100%），且父容器无 padding/margin 干扰 →sizes="(max-width: 768px) 100vw" - 中屏下图片放在两栏 grid 中，每栏占 50% →
"(max-width: 1024px) 50vw" - 桌面端固定宽度 400px 容器 →
"400px"（注意不是400vw） - 混合场景要写全，顺序无关，但建议从小到大排列：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
什么情况非用 <picture> 不可？
<picture> 不是 <img> 的升级版，它是为两类明确需求存在的：艺术方向（art direction）和格式降级（format fallback）。
立即学习“前端免费学习笔记（深入）”；
- 需要不同构图：比如移动端用裁剪后的竖版特写，桌面端用完整横版 → 必须用
<source media="(max-width: 768px)" srcset="hero-mobile.jpg"> - 优先发
image/avif，不支持就跳过，再试image/webp，最后 fallback 到image/jpeg→<source type="image/avif" srcset="a.avif"><source type="image/webp" srcset="b.webp"> -
<source>顺序很重要：浏览器按顺序匹配，第一个满足media或type的生效；都不满足才用末尾的<img> -
<img>必须存在且带src和alt，否则整个<picture>不渲染
src 属性还有没有用？
有，而且很关键：它是不支持 srcset 或 <picture> 的旧浏览器（如 IE）的唯一 fallback。但它**不参与现代浏览器的选图逻辑**。
- 现代浏览器忽略
src，只根据srcset+sizes或<picture>决策 -
src值建议和srcset中最小尺寸一致（如src="photo-480.jpg"），避免低分辨率设备加载高分辨率 fallback - 在
<picture>中，<img>的src是最终兜底，务必指向可用资源
真正容易被忽略的是：浏览器在 HTML 解析阶段就发起图片请求，此时 CSS 还没加载，JS 更没执行。所以任何依赖 JS 计算或 CSS 媒体查询来切换图片的“组件”方案，都会破坏原生预加载，反而让首屏更慢。
