HTML前端开发srcset降级必备教程-html教程-PHP中文网

srcset本身不提供降级能力，仅协助浏览器选择最适图片，真正兜底依赖src属性；若所有srcset候选失败或浏览器不支持（如IE11），则回退至src指向的兼容性图片（如JPG/PNG）。

html前端开发srcset降级必备教程

srcset 本身不提供“降级”能力，它只负责让浏览器选一张最合适的图；真正兜底的是 src 属性——如果所有 srcset 候选都加载失败，或浏览器根本不支持 srcset（如 IE11），就会退回到 src。别指望它自动 fallback 到另一张图，那得靠 onerror 或。

为什么 srcset 加了却还是加载大图或白屏

常见现象是：写了 srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w"，但 Chrome Network 面板里始终加载 large.jpg，甚至弱网下也卡住；或者在旧设备上直接白屏。

sizes 缺失或写错：没配 sizes，浏览器默认按 100vw 计算目标宽度，自然总选最大图；sizes="(max-width: 768px) 100vw, 50vw" 写对了，但 CSS 实际把图片容器限制在 300px 宽，浏览器仍会误判
w 描述符和原图真实宽度不符：比如图实际是 640px 宽，却写成 "photo.jpg 320w"，浏览器计算出的“应加载尺寸”就偏小，可能选错源甚至跳过整组
src 指向空值或 404：IE11 不支持 srcset，直接读 src；如果 src="" 或 src="missing.png"，页面就白屏或显示破损图标

srcset + sizes 的正确写法组合

这不是可选项，而是必须同步存在的协作关系。浏览器靠 sizes 知道“这张图在页面里大概占多宽”，再结合 srcset 里的 w 值，才能量化选择。

sizes 必须用媒体查询语法，且与实际 CSS 布局一致：例如容器在移动端满宽、桌面端固定 800px，就写 sizes="(max-width: 768px) 100vw, 800px"
srcset 中每个项必须带 w 单位，且数值 = 图片原始像素宽度：若图文件是 1600px 宽，就得写 "big.jpg 1600w"，不能写 "big.jpg 2x"（那是像素密度描述符，适用于 DPR 场景）
src 必须存在，且指向一个真实可用的兼容性兜底图：推荐 .jpg 或 .png，尺寸控制在 800px 以内，CDN 可达；绝对不要留空或填开发路径如 /assets/temp.jpg

srcset 失效时的 fallback 必须手动加 onerror

srcset 和 sizes 解决的是“选哪张”，不是“加载失败怎么办”。网络中断、CDN 节点故障、防盗链拦截都会导致已选中的图 404，此时浏览器不会自动切到 src，也不会重试其他 srcset 项——它只会触发 error 事件。

阿拉丁·前端工程工坊｜脚手架·组件·规范落地·构建优化·性能与可访问性一体

阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria

下载

内联 onerror 是唯一可靠方式：onerror="this.onerror=null; this.src='/img/placeholder.svg'"，不内联的 JS 绑定可能来不及捕获首次失败
必须加 this.onerror=null：否则备用图再失败会无限循环调用
备用图地址建议用内联 SVG 或 CDN 上的稳定资源：避免又一个 HTTP 请求失败，例如 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAi..."

想做格式降级（WebP → JPEG）？别用 srcset，改用 picture

srcset 不识别 MIME 类型，无法判断浏览器是否支持 WebP。你写 srcset="photo.webp 1x, photo.jpg 1x"，浏览器会当成两个同规格候选，可能优先加载 WebP（支持时），也可能因缓存/排序问题加载 JPG（不支持时也不报错），但绝不会“检测不支持就切 JPG”。