srcset 本身不提供降级逻辑，真正决定降级的是 sizes、src 和浏览器能力共同作用；配错任一环节会导致静默 fallback 至最差选项甚至白屏。
srcset 本身不提供“降级”逻辑，它只是告诉浏览器有哪些图可选；真正决定是否降级、怎么兜底的，是 sizes、src 和浏览器能力三者共同作用的结果。写错任意一环，就会静默 fallback 到最差选项（比如小屏加载 1200w 图），甚至白屏。
srcset + sizes 配错导致高分辨率图被强制加载
这是最常见也最隐蔽的问题：你写了 srcset="a-400.jpg 400w, a-800.jpg 800w"，但浏览器却加载了 a-800.jpg，哪怕用户在 375px 宽的手机上——根本原因不是图太大，而是 sizes 没告诉浏览器“这张图实际只占 375px 宽”。
-
sizes必须反映图片**在 CSS 布局中真实渲染的宽度**，不是容器 max-width，也不是“大概 50%”，例如：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 只写
srcset不配sizes，浏览器会默认用100vw估算，大概率选中最大图 -
sizes中的媒体查询必须和你的 CSS 媒体断点完全一致；如果 CSS 里是@media (max-width: 479px)，但sizes写成(max-width: 480px)，就可能在 480px 边界处错配 - 单位不能省：
sizes="50vw"合法，sizes="50"无效，整个属性会被忽略
picture 的 source 顺序和 type 值决定是否真生效
media 为真且 type 被支持的
-
(min-resolution: 2dppx)和image/avif放最前面 -
type值必须和服务器返回的真实Content-Type一字不差：image/webp有效，image/webp;或webp无效 -
media必须是合法媒体查询语句，media="max-width: 768px"缺括号 → 被忽略；media="768px"不是媒体查询 → 被跳过 - 底部的
src404 或路径错误，整块区域就空白
loading="lazy" 白屏的根本原因是 src 不可用
不支持 loading="lazy" 的浏览器（如 IE、旧版 Android WebView）会直接忽略该属性，仅加载 src。如果 src 是空、占位图路径错误、或被 display: none 隐藏，结果就是白屏——不是懒加载失败，是降级链断了。
-
src必须始终指向一个真实可用资源：1px GIF、LQIP 模糊图、或 SSR 渲染出的小图；绝不能是""或"#" - 不要用
display: none包裹图片容器——Safari 和多数 Android WebView 会直接跳过该元素，后续显示也无效 -
data-src（用于 JS 懒加载）必须静态写在 HTML 中，不能靠 JS 动态注入；断网时 JS 加载失败，data-src就不存在 - 确保
里有，否则media查询可能失效
最容易被忽略的不是语法，而是尺寸一致性：srcset 中每个 w 描述符必须和原图真实宽度完全一致，sizes 中每个断点必须和 CSS 实际渲染宽度严丝合缝，type 必须和服务端返回的 MIME 类型精确匹配。任何一处“差不多”，浏览器就放弃智能选择，退回到最保守方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
