srcset单独写无效，必须配合sizes才能实现真响应式；浏览器无sizes时默认按100vw计算，导致小屏加载大图，浪费带宽、拖慢LCP。
只写 max-width: 100% 是假响应式，移动端照样加载 2MB 桌面图；真响应式必须靠浏览器选图机制，核心是 srcset + sizes 配合，<picture> 仅在需要换构图或强制格式降级时才用。
为什么 srcset 单独写没用
浏览器看到 srcset 但没 sizes，就默认按 100vw 计算图片显示宽度——小屏手机也去加载 1200w 的图，流量白跑，LCP 更差。
- 错误写法：
<img srcset="p-400.jpg 400w, p-800.jpg 800w" src="p-800.jpg"> - 正确写法：必须补上
sizes，且覆盖所有视口范围，比如sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" -
sizes是字符串，不是 CSS，不支持calc()，空格位置敏感（旧版 Edge 会因(max-width: 768px)中多一个空格直接失效）
<picture> 不是“更高级”，是特定场景刚需
只有两种情况非用 <picture> 不可：一是艺术方向（比如手机裁人脸、桌面展全景），二是格式强制降级（WebP → JPEG）。
-
<source>必须写在<img>前面，顺序错整个<picture>失效 - 每个
<source>的media断点要和真实 CSS 布局断点一致，比如布局用768px，就别写成767px -
<img>不可省略，它是兜底项，也是所有<source>渲染的容器载体
viewport 和懒加载怎么配才不翻车
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须放在 <head> 最顶部静态声明，漏掉或写错位置，后面所有响应式逻辑都会错位。
立即学习“前端免费学习笔记（深入）”；
-
loading="lazy"只控制加载时机，不参与选图决策；单独加它，移动端仍下大图 - 推荐组合：
loading="lazy"+srcset+sizes，三者缺一不可 - 别混用原生
loading="lazy"和 JS 的IntersectionObserver，否则可能并发触发两次请求
图片尺寸和格式怎么选才实际有效
生成的图片宽度建议按 1.5× 步进（如 320w、480w、768w、1200w），覆盖主流设备逻辑像素宽度；srcset 里不能混用 w 和 x 描述符，否则整条属性被忽略。
- WebP/AVIF 要配降级路径，比如
<source type="image/webp" srcset="a.webp"><img src="a.jpg" alt=""> - Flex 容器里图片缩不进去？加
min-width: 0才生效 -
object-fit在父容器没设明确宽高时根本不起作用
最常被跳过的其实是 sizes 的完整性——漏掉某个断点区间，浏览器就会回退到默认行为，而你很难在 DevTools 里一眼看出它到底加载了哪张图。
