响应式图片降级必须显式写出标签并满足三个硬性条件：位于所有之后、不可自闭合、src与alt均不可为空；还需叠加srcset和sizes实现双层降级，且须在真实旧设备上验证。
响应式图片降级不是“备选方案”，而是强制要求——必须存在，且不能省略
src 和 alt，否则在旧版 Safari、不支持 <picture></picture> 的环境或 JS 失效时直接白屏。
为什么 <img> 不是可选项，而是降级核心
浏览器对 <picture></picture> 的解析逻辑是：从上到下扫描 <source></source>，命中第一个匹配的就加载；全都不匹配？那就靠 <img> 活下来。但这个“兜底”不是自动发生的——它必须显式写出，且满足三个硬性条件：
-
<img>标签必须写在所有<source></source>之后，且不能自闭合（<img>或<img>都无效） -
src属性不可为空，也不能指向 404 资源；建议用最小可用图（如hero-mobile.jpg）作为 fallback -
alt必须存在，否则屏幕阅读器无法描述，部分老浏览器（如 Safari 15.4 之前）会拒绝渲染该节点
<source></source> 全部失效时，<img> 怎么还能适配高 DPR
仅靠 src 是静态回退，无法应对 Retina 屏或窄视口加载大图的问题。这时要在 <img> 上叠加 srcset 和 sizes，形成“双层降级”：
-
srcset填入带2x描述符的资源，例如：hero-mobile.jpg 1x, hero-mobile@2x.jpg 2x -
sizes必须写，不能省略；值要反映实际布局宽度，比如：sizes="(max-width: 767px) 100vw, 50vw" - 注意：
sizes只能写在<img>上，写在<source></source>里会被完全忽略
这样即使所有 <source></source> 因 media 写错、括号缺失或断点重叠而失效，<img> 仍能根据设备像素比和视口宽度选图。
常见降级失效的静默陷阱
这些错误不会报错，但会让降级彻底失效，用户看到空白或低质图：
-
media="(max-width: 768px)"缺少括号 → 写成media="max-width: 768px"，整条<source></source>被浏览器跳过 -
<source></source>放在<img>后面 → 浏览器直接忽略全部<source></source>，只走<img src>，但若你忘了写src，就白屏 - 断点重叠，例如同时存在
min-width: 768px和max-width: 768px→ 768px 宽度永远匹配第一条，第二条永不触发，看似有 fallback，实则无覆盖 -
type="image/avif"写对了，但 Nginx/Apache 没配 MIME 类型 → 浏览器判定格式不支持，跳过该<source></source>，却没提示
旧浏览器兼容的最后防线
Safari 15.3 及更早版本不支持 aspect-ratio，也不支持 <picture></picture> 的部分 media 语法，但它们仍能渲染 <img>。所以：
- 不要用
@supports (display: grid)包裹整个<picture></picture>结构——老浏览器不识别该规则，会跳过整个块 - 如果项目需支持 iOS 14/Safari 14，建议把
<img>的src设为 WebP 兼容图（如 JPEG），再用srcset提供 WebP 版本，避免格式 fallback 失败 - polyfill 如
picturefill.js已基本无需引入——现代浏览器（Chrome 38+、Firefox 38+、Edge 13+、Safari 9.1+）均原生支持，仅 iOS 12–14 的 Safari 需谨慎验证
真正容易被忽略的是：降级不是“写了就算”，而是必须在真实旧设备上打开 DevTools 切换 UA，手动禁用 JS，再刷新看是否仍显示图片——任何环节漏掉 src 或 alt，都可能让关键视觉信息彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
