旧浏览器不支持和srcset时，唯一可靠方案是结构兜底：内必须包含末尾的，ie/safari≤9/android≤4.4等环境会直接忽略、仅渲染该，且src须指向可用jpeg/png。
旧浏览器不支持 <picture></picture> 和 srcset 怎么办
直接 fallback 到 <img src="fallback.jpg"> 是唯一可靠方案。旧版 Safari（≤9）、Android 4.4 WebView、IE 全系根本不解析 <source></source>，整块 <picture></picture> 可能被忽略或渲染为空白——这不是 bug，是规范行为。别指望它“自动选一个”，得靠结构兜底。
- 必须保留
<img>标签作为最终回退，且src值要指向一张可用的通用图（如 800px 宽的 JPEG） - 避免在
<source></source>中同时写media和type，旧浏览器容易整个<picture></picture>失效 - Android 4.4 的 WebView 对
srcset支持极差，建议改用data-srcset+ JS 检测后动态赋值
srcset 宽度描述符（480w）在 IE 和老 Safari 里怎么处理
IE 全系和 Safari ≤9 完全无视 srcset 属性，连语法都不解析，直接走 <img src>。它们也不理解 w 描述符，更不会根据视口宽度切换资源。所以你写的 small.jpg 480w, medium.jpg 800w 在这些环境里等于没写。
- 不要把
src设为空或占位符，否则降级后图片直接 404 - 如果项目必须支持 IE9–10，可配合 Modernizr 检测
srcset支持性，再用 JS 补逻辑（但成本高，通常不值得） - 更务实的做法：对关键 banner 图，只用单张高质量 JPEG +
src，放弃响应式加载
WebP 格式图片如何安全 fallback
WebP 虽然体积小，但 IE、Safari ≤11、Android ≤4.4 都不支持 type="image/webp"。仅靠 <source type="image/webp"></source> 不够，必须确保 <img src> 指向 JPEG 或 PNG。
- 结构必须严格按顺序：
<source type="image/webp"></source>→<source type="image/jpeg"></source>→<img src="fallback.jpg"> - 不要省略
<img>的src，否则 Safari 9 会显示空白，而不是尝试下一个<source></source> - 服务端无需做 MIME 类型协商，浏览器只按 HTML 结构顺序尝试，不发额外请求
为什么不能只靠 html5shiv 让 <picture></picture> 工作
html5shiv 只解决语义标签（如 <header></header>）在 IE8– 的 DOM 创建问题，对 <picture></picture> 这种新元素+新属性组合完全无效。它不补解析器逻辑，也不模拟 srcset 的资源选择算法。
-
<picture></picture>是 HTML5 新增的“容器型”元素，依赖浏览器原生解析流程，无法用 JS 注册修复 - 试图用
document.createElement('picture')在 IE8 执行，只会让标签名存在，但内部<source></source>仍被当作文本节点处理 - 真正需要兼容的场景，应优先评估是否值得为低占比用户增加 JS 逻辑；多数情况下，简单
<img src>更稳
<img> 的 src 图是否经过同样压缩、是否有意料外的宽高比变化——这些细节比语法本身更容易导致视觉断裂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
