浏览器自动将srcset降级到src，无需手写代码；src必须存在且指向兼容性高的JPG/PNG兜底图，当srcset全部不可用（格式不支持、媒体不匹配或404）时，浏览器才使用src。
srcset 降级到 src 的行为是浏览器自动做的，不用手写“降级代码”
浏览器遇到 srcset 时，只要同时提供 src 属性，就会把它当作 fallback：当所有 srcset 中的资源都不可用（比如格式不支持、媒体条件不匹配、解析失败），或 JS 被禁用、早期浏览器（IE）加载时，src 就会被使用。你不需要额外写判断逻辑或 fallback 脚本。
常见错误是以为要靠 JS 检测屏幕密度再手动切换 src，其实这反而破坏了原生响应式加载机制，还增加阻塞和维护成本。
正确写法：src 必须存在，且指向最安全的通用图
src 不是“低清图”，而是“能被所有环境加载的兜底图”。它应该满足：
• 格式为 .jpg 或 .png（避开 webp/avif 等兼容性差的格式）
• 尺寸适中（比如 1200px 宽，兼顾移动端和桌面端清晰度）
• 不依赖 srcset 中的任何条件
<img src="photo.jpg" srcset="photo.webp 1x, photo@2x.webp 2x, photo.avif 1x, photo@2x.avif 2x" alt="示例图">
注意：上面这段在 Safari 16.4 之前会忽略所有 avif 条目（因不支持），但会退回到 photo.jpg；在 IE 中直接忽略 srcset，只加载 photo.jpg。
立即学习“前端免费学习笔记（深入）”；
media + srcset 组合时，src 依然生效，但需注意匹配逻辑
当用 media 配合 srcset（即 <picture></picture> 场景），src 只在对应 <source></source> 匹配成功时才作为该 source 的 fallback。最终兜底仍需一个无 media 的 <source></source> 或直接给 <img alt="HTML中srcset降级代码怎么写？高效实现指南" > 设 src。
- 错误写法：只写带
media的<source></source>，没给<img alt="HTML中srcset降级代码怎么写？高效实现指南" >设src→ 在不匹配任何 media 的设备上空白 - 正确写法：最后一个
<source></source>不带media，或确保<img alt="HTML中srcset降级代码怎么写？高效实现指南" >有src
<picture> <source media="(min-width: 768px)" srcset="hero-desktop.webp 1x, hero-desktop@2x.webp 2x"> <source srcset="hero-mobile.jpg 1x, hero-mobile@2x.jpg 2x"> <img src="hero-fallback.jpg" alt="英雄图"> </picture>
验证降级是否生效，重点看 Network 和 DevTools 的 “Initiator”
别只看页面显示——有些图看似加载了，其实是从内存缓存或 service worker 返回的。真要确认降级行为，得：
• 清空缓存 + 硬刷新（Cmd+Shift+R）
• 在 Network 面板过滤 img，观察实际请求的 URL
• 切换 Device Toolbar 到 “Responsive”，关掉 “Network conditions” 中的 “Simulate network throttling”，避免干扰
• 在老设备（如 iPhone 6S）或 IE11 上实机测试，比模拟器更可靠
容易被忽略的一点：srcset 中的 URL 如果 404，浏览器不会自动 fallback 到 src，而是报错并留空。所以部署前务必检查所有 srcset 路径是否存在。
