srcset仅负责同一格式下的分辨率适配，不处理格式降级；真正的格式/路径/兼容性降级需依赖++组合，否则WebP/AVIF在旧版Safari、IE等浏览器中会显示为空白。
srcset 本身不降级，它只做同一格式下的分辨率适配；真正负责格式/路径/浏览器兼容性降级的，是 <picture></picture> + <source></source> + 底层 <img alt="HTML中srcset降级与picture配合教程" > 的组合。单独写 srcset 不配 <picture></picture>，WebP/AVIF 在 Safari 13.0 之前、IE、旧安卓 WebView 里就是空白。
为什么 srcset 单独用会“降级失败”
srcset 只告诉浏览器：“这张 JPEG 图，有 400w、800w、1200w 三个尺寸可选，按 sizes 算出目标宽度后挑一个最接近的”。它不关心格式是否被支持，也不管浏览器认不认识 webp。
常见错误现象：
- 写了
<img src="a.webp" srcset="a.webp 1x, a@2x.webp 2x" alt="HTML中srcset降级与picture配合教程" >，Safari 12 显示空框（alt 都不渲染） -
sizes="(max-width: 768px) 100vw"写成sizes="100vw"，浏览器默认按 100vw 估算，小屏也拉大图 -
srcset混用400w和2x，Chrome 直接跳过整组，静默 fallback 到src
picture 中 source 的 type 和 media 必须同时生效
<source></source> 被采用的前提是：当前浏览器既支持它的 type（如 image/webp），又满足它的 media 条件（如 (min-width: 768px)）。二者缺一不可，且顺序从上到下匹配，第一个全满足的就加载，其余跳过。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
type必须写完整 MIME 类型：image/webp✅，webp或.webp❌ -
media必须是合法媒体查询：(min-width: 768px)✅，min-width: 768px（缺括号）❌ - 服务器返回的图片 Content-Type 必须和
type一致，否则 Network 面板显示blocked:mime-type - 所有
<source></source>必须写在<img alt="HTML中srcset降级与picture配合教程" >标签之前，且每个都带srcset或src，空值会被忽略
兜底的 img src 是最后防线，不能省略也不能失效
<img alt="HTML中srcset降级与picture配合教程" > 在 <picture></picture> 里不是“备选”，而是强制 fallback 层。IE8–IE11、Safari ≤13.0、部分 Android 4.x WebView 完全忽略 <picture></picture>，只解析这个 <img src alt="HTML中srcset降级与picture配合教程" >。一旦它 404 或路径错误，整张图就空白。
关键细节：
-
<img alt="HTML中srcset降级与picture配合教程" >必须有src，且该路径要真实可访问（构建时建议用插件预检） - 可以加
onerror="this.src='placeholder.png'"，但 fallback 图自身必须可靠，否则触发无限错误循环 -
alt文本不是降级内容，只是无障碍描述；图片失败时显示alt是失败表现，不是设计行为 - 若需视觉降级（如占位色块），用 CSS：
img:not([src]), img[src=""] { background: #f0f0f0; border: 1px dashed #ccc; }
构建时预检路径比运行时 onerror 更早拦截问题
靠 onerror 处理 404 是补救，不是预防。Vite/Webpack 构建阶段就能发现 src="/images/logo.webp" 对应文件不存在，此时自动替换为 placeholder.png，比用户打开页面再报错更可靠。
实操要点：
- Vite 可用
vite-plugin-html扫描 HTML 中所有<img src alt="HTML中srcset降级与picture配合教程" >，检查 public 目录下是否存在对应文件 - Webpack 可通过
html-webpack-plugin的beforeAssetTagGeneration钩子实现类似逻辑 - 注意：构建工具默认不校验路径，必须显式配置；且只校验静态字符串，不处理 JS 拼接的动态
src - CDN 场景下，还需确保响应头含
Vary: Accept，否则 WebP 请求可能被缓存为 JPEG 响应
最容易被忽略的一点：所有 <source></source> 的 srcset 值，必须和原图真实宽度一致（比如 photo-400w.jpg 400w），不能写估算值。否则 sizes 计算出的目标尺寸错位，浏览器可能永远选不到你预期的图档。
