srcset 与 sizes 必须配对使用，仅写 srcset 会导致浏览器按 100vw 错误估算宽度；sizes 语法需含括号如 (max-width: 768px) 100vw, 50vw；<picture> 中 <img> 是唯一兜底，必须带真实 src 和 alt；loading="lazy" 不可单独依赖，src 需指向高可用静态资源；CSS 不得用 display: none 或忽略宽高比，否则破坏降级。
srcset + sizes 必须配对使用，否则浏览器瞎猜尺寸
只写 srcset 不配 sizes，浏览器会按默认 100vw 估算图片宽度，大概率选错资源——手机加载 2MB 大图、桌面却只拿到 320px 小图都是常见后果。
-
srcset告诉浏览器“有哪些图可选”，sizes才告诉它“这张图在当前布局里实际占多宽” - 用
w描述符（如photo-768.jpg 768w）时，sizes必须存在；只用x描述符（如1x）可省略sizes，但仅适用于固定宽高的场景（如头像） - 错误写法：
sizes="max-width: 768px"—— 缺少括号，浏览器直接忽略；正确写法：sizes="(max-width: 768px) 100vw, 50vw"
<picture> 的 <img> 不是备选，是唯一兜底
IE11、微信旧版 iOS WebView、部分企业内嵌浏览器会直接忽略整个 <picture> 标签，只渲染内部的 <img>。如果这个 <img> 的 src 是空、404 或相对路径错误，banner 就彻底白屏。
-
<img>必须写在所有<source>之后，且带真实可用的src（推荐中等尺寸 JPG，别用 WebP）和非空alt -
<source>按顺序匹配，第一个满足条件的生效；断点必须从宽到窄排列，例如(min-width: 1200px)→(min-width: 768px)→(max-width: 767px) - 禁用
<img>上的width/height属性——它们会干扰响应式，用 CSS 控制更可靠
loading="lazy" 单独用等于放弃降级能力
不支持 loading="lazy" 的浏览器（如 Safari 14.1 之前、所有 IE、多数广告拦截插件环境）会完全忽略该属性，只加载 src。若此时 src 是空、占位图路径错误，或被 display: none 隐藏，图片就永远不出现。
-
src必须指向一个静态、高可用资源：CDN 托管的/placeholder.svg、SSR 渲染出的小图，或 1px GIF -
data-src存高清地址，且必须在 HTML 源码中静态存在（不能靠 JS 动态写入），否则断网时根本读不到 - 关键图（如 banner 主视觉、商品首图）必须绕过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
CSS 隐藏或未预留空间会让降级静默失效
有些样式在 JS 未执行、断网或低版本浏览器下依然生效，且不报错，但会直接让懒加载或响应式逻辑归零。
立即学习“前端免费学习笔记（深入）”；
-
display: none包裹图片容器？Safari 和多数 Android WebView 会跳过该元素，后续即使display改为block，也不会触发加载 - 没设宽高或
aspect-ratio？图片加载后强制重排，用户感知为“闪动”或“加载失败”，尤其在兜底切换时更明显 - 用
opacity: 0或visibility: hidden做淡入？不影响懒加载触发，但 JS 失效时用户看到的就是黑块或空白，需额外 CSS 兜底显示逻辑
src 的初始值开始，每一层都留有退路：HTML 结构里 <img> 必须能独立活下来，srcset 和 sizes 必须协同工作，CSS 不能偷偷关掉加载开关——最容易被忽略的，往往是那个没写 sizes 的 srcset，或者那个被 display: none 藏起来的 banner 容器。 
