高分屏图片模糊主因是2x描述符仅在图片占满视口宽度时可靠生效；CSS限制宽度（如max-width: 600px）使浏览器无法反推所需物理像素，被迫降级加载低分辨率图，且混用w/x或sizes错误会导致整个srcset被忽略而回退至src。
高分屏图片降级不是“自动 fallback”，而是必须显式声明回退路径；只写 srcset 里的 2x，不配 sizes 或没提供 1x 源，浏览器大概率直接加载低分辨率图甚至 fallback 到 src——这不是 bug，是规范行为。
为什么 2x 图片在高分屏上还是模糊
因为 2x 描述符只在图片渲染宽度 ≈ 视口宽度时才可靠生效。一旦 CSS 设了 max-width: 600px，浏览器就无法从 2x 反推出所需物理像素数，转而按默认规则选图（比如拉一张 800w 的图，在 DPR=2 的 iPad 上只显示 400 CSS 像素宽，结果就是模糊）。
-
2x是密度导向，不是尺寸导向：它假设“1 CSS 像素 = 2 物理像素”，但前提是这张图真占满视口宽度 - 混用
w和x描述符（如logo-400w.jpg 400w, logo@2x.png 2x）→ 整个srcset被静默忽略，回退到src - 老 iOS Safari（≤12.1）根本不支持
w，但支持2x；新 Chrome 优先用w + sizes，2x仅作 fallback
<picture> 是唯一能同时控制艺术方向和格式降级的方案
当你要为高分屏提供 WebP/AVIF，又得兼容旧浏览器时，<picture> 不是可选项，是必需项。顺序决定成败：浏览器从上到下匹配第一个支持的格式，不支持就往下走。
- WebP/AVIF 必须放在最上面，JPEG/PNG 放在最后作为兜底
-
<source>的media属性必须覆盖全部视口范围，最后一项不能省略条件，否则 Safari 会整个忽略该<source> -
<img>的src必须指向一个真实可用的默认图（如 CDN 托管的占位图），否则所有<source>失败后，页面只会显示alt文本
<picture> <source type="image/avif" srcset="hero-800.avif 800w, hero-1200.avif 1200w" sizes="(max-width: 768px) 100vw, 50vw"> <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw"> <img src="/images/hero-fallback.jpg" alt="Hero banner"> </picture>
onerror 不能替代结构化降级，只适合轻量兜底
用 onerror 动态换图看似简单，但它绕过了浏览器原生的资源选择逻辑，对 srcset、sizes、<picture> 内部的 <source> 都无效——错误发生在单个 <img> 元素上，而 <source> 加载失败不会触发它的 onerror。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：静态图 404 后换一张已知可用的备用图（如统一占位图）
- 不适用场景：响应式
srcset中某档 w 图 404、CDN 参数错误导致 URL 404、跨域拒绝加载 - 多次触发可能造成重复请求，且无法捕获
<source>加载失败
验证是否真正生效，别信“看起来清晰”
唯一可信方式是 DevTools → Network → 切设备模拟器 → 看请求 URL 后缀和 Content-Length。不同 DPR 下应看到不同后缀（如 -1200w.jpg vs @2x.jpg）和明显差异的体积。
-
sizes写错（如用了50%或50rem）、单位非法、未覆盖全视口 → 整个srcset被跳过，直接走src - CDN 自动加参（如
?v=1）若与srcset中的w值不匹配，也会导致浏览器放弃该源 - 构建工具（Vite/Webpack）不会自动补
@2x后缀，icon@2x.png404 是常见问题，得靠插件或手动 resolve 规则
真正的降级不是靠猜或试，是靠 sizes 精确描述渲染宽度、srcset 提供足够粒度的源、<picture> 显式声明格式优先级——三者缺一不可。最容易被忽略的是：sizes 必须与 CSS 实际渲染宽度一致，哪怕只差几个像素，浏览器的选图算法就可能完全跑偏。
