<picture>标签在旧版浏览器中被跳过，仅渲染内部<img>元素，因此<img>必须作为兜底且置于末尾，其src需为JPEG/PNG通用格式；每个<source>只用单一条件（media或type），且<img>须为<picture>最后一个子元素；所有源图应尺寸一致、关键区域对齐，避免降级跳变；polyfill仅作增强，不可替代HTML兜底。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

标签在旧版浏览器中不会被识别，整个标签会被跳过，只渲染内部的``元素——这反而是设计上的降级优势，关键在于怎么写这个``。 必须把兜底放在最内层末尾 它不是可选项，是兼容逻辑的终点。浏览器不支持``时，就靠它显示；支持但所有``都不匹配时，也靠它兜底。所以它的`src`必须指向一个通用格式（JPEG 或 PNG），不能是 WebP、AVIF 或带查询参数的动态地址（如`?format=webp`）。 别让拖垮整个结构 IE11 及以下、Android 4.3 以前的 WebView 完全不解析``，遇到语法稍有异常（比如``混用`media`和`type`、属性值缺引号、或嵌套错误）可能直接跳过全部内容，导致空白。稳妥做法是：

• 每个``只用一个核心条件：要么`media`，要么`type`，不要叠加
• 所有``写在``之前，且``必须是``的最后一个子元素
• 避免在外层再包`
  `做“二次 fallback”，旧浏览器根本不会走到那一步 确保视觉一致性 不同格式或尺寸的图片如果构图、宽高比、主体位置不一致，降级时会出现明显跳变。例如 WebP 版裁掉了左右留白，而 JPEG 版保留全图，用户从新浏览器切到 IE 就会感觉图片“突然变宽”。所以：

  • 所有源图应保持相同尺寸和关键视觉区域
  • 用 CSS 控制显示区域（如`object-fit: cover`），而不是依赖图片自身裁剪
  • 慎用``做艺术指导（art direction），除非你确认降级图也能自然承接

  JS polyfill 是补充，不是替代 像 picturefill 这类库能在 IE8+ 等环境模拟``行为，但它需要 JS 执行后才生效，首屏仍可能闪白或延迟加载。因此：

  • polyfill 仅用于增强，不能替代 HTML 层面的兜底``
  • 只在确有旧浏览器流量（如政企内网）时引入，避免给现代用户增加 JS 负担
  • 若只用``而不用``，IE 会退化为加载`src`，所以`src`属性永远不能省