srcset 本身不提供降级，真正决定加载效果的是 sizes 是否准确、src 是否有效及浏览器兼容性；三者缺一不可。

srcset 本身不提供“降级”，它只提供选择权；真正决定是否白屏、是否加载大图、是否 fallback 到 JPEG 的，是 sizes 是否写对、src 是否可用、以及浏览器是否支持该语法——三者缺一不可。

srcset + sizes 配错就等于没写

只写 srcset 不配 sizes，浏览器会默认按 100vw 估算图片宽度，哪怕你页面容器只有 320px 宽，它也可能选中 1600w 图。这不是“降级失败”，是根本没触发降级逻辑。

• sizes 必须反映图片**实际渲染宽度**，不是容器 CSS 宽度，也不是视口宽度；常见可靠写法：sizes="(max-width: 768px) 100vw, 50vw"
• srcset 中所有项必须统一用 w 描述符（如 photo-400.jpg 400w），混用 x 和 w 会让 Chrome/Safari 直接忽略整个列表
• 务必保留 src 属性指向一个真实可访问的图（如 CDN 托管的 800w JPEG），IE11 或解析失败时全靠它兜底

srcset 里 w 描述符必须和原图真实宽度一致

写 photo-400.jpg 400w 却放了一张 380px 宽的图，浏览器计算“目标尺寸”时就会偏差，导致小屏加载大图、大屏加载模糊图。这不是浏览器 bug，是尺寸声明失真。

• 用 identify -format "%wx%h" photo-400.jpg（ImageMagick）或在线工具确认每张图的真实像素宽
• 不要用“大概 400px”这种估算值；400w 就必须是 400 像素宽，否则 sizes 算出的槽宽与候选图不匹配
• 开发阶段验证：DevTools → Network → Disable cache → 切不同 DPR 设备，看实际加载 URL 是否随条件变化

src 属性失效是白屏最常见原因

很多团队以为 loading="lazy" 是万能开关，但只要 src 是空、是 "#"、是 404 路径，或者被 display: none 隐藏，旧浏览器（IE、老 Android WebView）和断网场景下就会直接白屏——不是懒加载失败，是降级链从根上断了。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• src 必须始终指向一个真实资源：1px GIF、LQIP 模糊图、或 SSR 渲染出的 320w WebP/JPEG
• 禁用 display: none 包裹图片容器；Safari 和多数 Android WebView 会跳过该元素，后续 JS 显示也无效
• 如果要用 JS 懒加载，data-src 必须静态写在 HTML 中（不能靠 JS 注入），否则断网时它根本不存在

picture + source 不是 srcset 的替代品，而是格式级补充

不解决 srcset 配错的问题，它只负责格式选择（WebP/AVIF → JPEG）。如果 的 srcset 里全是 404 地址，浏览器照样 fallback 到 ——而如果那个 src 也不可用，结果还是白屏。

• 的 type 值必须严格匹配真实 MIME 类型：image/webp，错一个字母（如 webp 或 image/webp;charset=utf-8）就静默失效
• 必须写在 之前，且每个 srcset 至少含两个宽度档位（如 400w, 800w），否则 Chrome 可能跳过该源
• 底部 的 src 是最终渲染载体，不是“备用”，不能是带查询参数的动态地址（如 ?format=webp），IE 会直接加载失败

最容易被忽略的点：没有设 width/height 或 aspect-ratio，图片加载前不预留空间，加载完成瞬间撑开容器，导致文字跳动、CLS 飙升——这和降级无关，但用户感知就是“体验崩了”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！