src 是唯一强制降级兜底，必须真实可用；srcset 需配 sizes 才能正确选图，否则按 100vw 估算致大图加载失败；描述符须统一用 w 且值真实；WebP/AVIF 格式降级须用 picture。

srcset 本身不负责“降级”，它只提供候选资源；真正起兜底作用的是 src 属性。没写 src，或 src 指向不可用路径，就等于主动放弃降级能力。

srcset 必须配 sizes 才能正确选图

只写 srcset 不写 sizes，浏览器会按 100vw 估算渲染宽度，大概率加载远超需要的大图（比如在 320px 手机上拉取 1200w 图），导致超时、失败、白屏。

• sizes 值必须真实反映该图片在页面中的**渲染宽度**，不是容器 CSS 宽度，更不是视口宽度
• 常见可靠写法：sizes="(max-width: 768px) 100vw, 50vw" —— 表示小屏占满视口，大屏占半宽
• 如果图片被 max-width: 400px 限制，sizes 就得写成 "400px" 或 "(min-width: 401px) 400px, 100vw"
• DevTools Network 面板禁用缓存后刷新，右键图片 → “Copy response” 可验证实际加载尺寸是否匹配

srcset 描述符必须统一且真实

混用 w 和 x 描述符会让整个 srcset 被浏览器忽略；所有 w 值必须和原图文件真实像素宽度一致，不能写估算值。

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

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

下载

• 推荐全用 w：例如 photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w
• 若用 x（如 photo.jpg 1x, photo@2x.jpg 2x），仅适用于固定宽高比 + 固定 CSS 尺寸场景，且无需 sizes
• 每个 srcset 条目必须指向真实可访问的资源，否则该候选直接跳过，不报错也不警告
• 不要把 WebP/AVIF 地址塞进 srcset —— 格式降级必须走 <picture></picture>，img 的 srcset 只管分辨率/尺寸

src 是唯一强制 fallback，绝不能省略或失效

src 不是“可选备用”，而是所有不支持 srcset 的环境（IE11、旧版 Android WebView、JS 禁用、网络中断后重试）的最终防线。它挂了，整条链就断了。

立即学习“前端免费学习笔记（深入）”；

• src 必须指向一个体积小、格式兼容性极广的图（如 800w JPEG 或 PNG），不能是空字符串、"#"、或相对路径错误的占位图
• 建议用 CDN 托管的主图作 src，既保底又避免首次加载空白
• 如果 src 图也失败，浏览器不会尝试 srcset 中的其他项——它只会显示破损图标
• 想做运行时补救？得靠 onerror 监听，但那是兜底，不是 srcset 自带能力

最容易被忽略的点：你写了 srcset 和 sizes，但没检查 src 是否真能返回 200；只要 src 失效，用户在弱网或旧设备上看到的就是白屏，而不是“自动降级”。