必须包含 作为降级兜底，因其是 ie11 等不支持浏览器中唯一渲染的元素，且 src 和 alt 为语义与无障碍强制要求； 需置于所有 后、带有效 src（推荐兼容 jpg）和非空 alt，禁用内联宽高； 的 media 必须按从宽到窄顺序书写并加括号，如 (min-width: 1200px)；微信 webview 对 type 和 srcset 兼容性差，应限制格式并使用绝对路径；背景图 fallback 应结合多 url() 声明与 @supports 隔离高级语法，避免依赖 object-fit 或 aspect-ratio。
为什么 <picture></picture> 必须配 <img> 作降级
浏览器不支持 <picture></picture>（比如 IE11、旧版 UC）时，会直接忽略整个标签块，只渲染其内部的 <img>。这不是“备选”，而是唯一兜底路径——<img> 的 src 和 alt 是强制存在的语义保障，缺失会导致无障碍失败、SEO 折损、甚至图片完全不显示。
常见错误是删掉 <img>、只留一堆 <source></source>，结果在微信 iOS 旧版 WebView 或某些企业内嵌浏览器里 banner 一片空白。
-
<img>必须写在所有<source></source>之后，且带src（不能空）、alt（不能为空字符串） -
src值建议指向一张中等尺寸、兼容性最强的 JPG 图（别用 WebP），宽高比与主视觉一致 - 不要给
<img>加width/height属性——CSS 控制更可控，避免内联属性干扰响应式
<source></source> 的 media 顺序写错就彻底失效
浏览器对 <source></source> 是从上到下线性扫描，匹配第一个为 true 的就停止。如果手机断点写在最前面，桌面图永远加载不到；如果断点重叠（比如同时写了 (min-width: 768px) 和 (max-width: 768px)），768px 宽度只会命中第一个，后面全被跳过。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确顺序：从宽到窄，例如
min-width: 1200px→min-width: 768px→max-width: 767px - 每个
<source></source>的media必须带括号，media="max-width: 768px"是无效语法，要写成media="(max-width: 768px)" -
<source></source>的type属性只用于格式判断（如type="image/webp"），不参与尺寸匹配——它和media是正交条件
背景图 fallback 怎么写才真有用
当 banner 用 background-image 实现时，CSS 本身没有原生降级机制。所谓“降级”，其实是靠多层声明 + 浏览器兼容性兜底：先写最老的 url()，再覆盖新语法（image-set()、cross-fade()），最后用 @supports 隔离高级特性。
- 基础 fallback：在
background-image中按顺序写多个url()，浏览器取第一个能加载的，例如background-image: url(logo.jpg), url(logo.webp);——但注意，这仅在部分浏览器生效，不可靠 - 可靠方案：用
@supports (background-image: image-set(...))包裹现代语法，外面保留传统url()声明 - 绝对别依赖
object-fit或aspect-ratio做 fallback，IE 和旧 Safari 完全不支持，会导致图片拉伸或塌陷
微信内嵌浏览器的特殊降级处理
微信 Android 和 iOS 内置 WebView 对 <picture></picture> 支持尚可，但对 srcset + sizes 解析不稳定，常回退到 <img> 的 src。更麻烦的是，它会静默忽略不识别的 type（比如 image/avif），却不触发降级逻辑。
- 微信场景下，
<source></source>的type只保留image/webp和默认image/jpeg，砍掉image/avif等新格式 - 所有
srcset值必须含完整路径（不能相对路径），微信有时会把相对路径解析成错误 base URL - 加一行
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">，能小幅提升旧版微信对<picture></picture>的识别率
真正难处理的不是语法兼容，而是当降级发生时，图片尺寸、文字层级、点击热区是否还保持可用——这些细节一旦漏掉，用户看到的就不是“稍差一点”，而是“根本没法用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
