srcset + sizes 配错等于没写，浏览器忽略srcset直接加载src；sizes必须精确匹配图片真实占位宽度，如“(max-width: 768px) 100vw, 50vw”，缺配、混用w/x描述符或漏src均导致降级失效。
不好——不是方案本身不好，而是“只写 srcset 不配 sizes”“只加 loading="lazy" 不设 src fallback”这类常见写法，根本没触发降级，只是自我安慰。
为什么 srcset + sizes 配错等于没写
浏览器不会猜你图片要占多宽。它只认 sizes 声明的渲染宽度，再按这个宽度从 srcset 里挑最接近的资源。写错或缺一，就回退到 src 或直接用 100vw 加载最大图。
-
sizes="(max-width: 768px) 100vw, 50vw"是安全写法：小屏占满、大屏占半，和实际布局一致 - 写成
sizes="100vw"—— 桌面端缩放或 flex 容器里，高 DPR 设备（如 Mac Retina）仍会加载 2x/3x 图，浪费带宽 -
srcset里混用w和x描述符（如photo-800w.jpg 800w, photo@2x.jpg 2x）—— 浏览器直接忽略整条srcset - 漏掉
src属性 —— Safari 12 以下、部分安卓 WebView 会白屏，因为不支持srcset就不加载任何图
为什么 loading="lazy" 单独用是假降级
它不提供任何 fallback 能力。不支持该属性的环境（旧 Safari、IE、广告拦截插件、断网 JS 失败）下，浏览器只加载 src。如果 src 是空、"#"、或被 display: none 隐藏，图片就永远不出现。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 正确姿势：
src必须指向可用资源（如src="/placeholder.svg"），data-src存高清地址且静态写在 HTML 里 -
display: none在 Safari 和多数 Android WebView 中会让IntersectionObserver完全跳过元素，即使之后 show 出来也不会补触发 - 用
opacity: 0或visibility: hidden替代，不影响懒加载逻辑，但需确保 CSS 失效时用户至少能看到占位图 - 首屏关键图必须绕过懒加载：直接写死
src，不加loading="lazy"，也不设data-src
怎么验证降级真生效了
不能只看页面显示正常。得进 Chrome DevTools Network 面板，关缓存，切设备模拟器，看实际加载的是哪个 URL。
立即学习“前端免费学习笔记（深入）”；
- 在 Network 面板勾选
Large rows，看清每张图的完整请求 URL 和响应头里的Content-Length - 切 iPhone 12（DPR=3）模拟器，应加载
1200w或1800w图；切普通桌面（DPR=1），应加载400w或800w图 - 手动禁用 JS 后刷新：所有图片仍应显示（哪怕只是占位图），
data-src不应丢失，src不应为空 - 把
picture里source的type写错（如image/webpp），观察是否 fallback 到img的src—— 这才是真实降级链路
真正难的不是写对语法，而是让 src 始终可加载、data-src 始终静态存在、JS 初始化 内联且带兜底、CSS 不破坏可见性判断——这四点缺一，降级就断在某个环节，用户看到的只会是白屏或巨图卡顿。
