srcset本身不提供降级能力，真正起作用的兜底逻辑靠sizes+src配合；漏掉sizes浏览器按100vw保守加载大图，src缺失则IE等旧浏览器直接白屏。
srcset 本身不提供“降级”能力，它只是告诉浏览器“我有一组图，请按需选一个”，真正起作用的兜底逻辑全靠 sizes + src 配合，漏掉任意一项，高分辨率图就可能不加载、小屏强拉大图、或直接 fallback 到单张图。
为什么写了 srcset 但浏览器还是加载最大图
浏览器没 sizes 就无法预判这张图在页面中实际占多宽，只能保守地按 100vw 计算——哪怕你只在 320px 宽容器里显示，它也可能加载 1920w 的图。这不是 bug，是规范行为。
-
sizes必须写，且值要和 CSS 实际布局完全对齐；比如容器被max-width: 600px限制，sizes="(max-width: 768px) 100vw, 50vw"就会失效，因为 768px 断点永远不命中 - 用 Chrome DevTools Network 面板勾选
Disable cache后刷新，右键图片 →Copy response查看真实返回尺寸，确认是否符合预期 -
srcset中的w描述符（如320w）必须和原图真实宽度一致；用file logo.jpg命令验证输出是否含明确800 x 450，不能是data或no dimensions
src 是强制存在的兜底，不是可选项
IE11、旧 Android WebView、甚至某些 Safari 版本会直接忽略 srcset，只读 src。如果这里留空、写错路径、或指向一个带查询参数的动态地址（如 logo.jpg?format=webp），整个图片就会白屏或显示破损图标。
-
src应指向一个静态、高可用资源，推荐用根路径：/img/logo-fallback.jpg - 避免相对路径陷阱：
../logo.jpg在子目录页面可能 404，而/img/logo.jpg更可靠 - 不要指望
src和srcset内容一致——它可以是压缩更狠的 JPEG，只要尺寸相同、构图一致即可
常见错误：把 srcset 当成格式降级用
srcset 只处理分辨率/像素密度，不识别 type。想实现 WebP → JPEG 或 AVIF → WebP 的格式回退，必须用 <picture></picture> + <source type="image/webp"></source>，否则浏览器根本不会尝试加载 WebP。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 写了
<source type="image/webp" srcset="a.webp"></source>却仍加载 JPEG？先检查服务器返回的Content-Type是否为image/webp；Nginx 缺少types { image/webp webp; }就会返回application/octet-stream，浏览器直接跳过 -
<source></source>顺序决定匹配优先级：AVIF 放最前，WebP 居中，JPEG/PNG 必须落在<img src alt="HTML使用srcset实现降级兼容的实战教程" >里，不能写成第三个<source></source> - 本地双击打开 HTML 文件时，
file://协议下多数浏览器会忽略type判断，务必用python3 -m http.server启服务测试
弱网下 srcset 失效的真实原因
网络慢不会让 srcset “自动切小图”。浏览器一旦发起请求，就不会中途换源——它只会等超时或失败后触发 onerror。所以单纯靠 srcset 无法应对弱网抖动。
- 首屏关键图建议禁用
loading="lazy"，否则断网时连src都不加载，直接白屏 - 若需真正基于网络质量切换，得用
fetch()+AbortController主动探测，成功后再赋值img.src，而不是依赖 HTML 属性 -
srcset中的x描述符（如2x）在 DPR 变化频繁的设备（如 iOS 横竖屏切换）上容易错选，优先用w+sizes组合
最容易被忽略的一点：所有 srcset 图片的原始像素尺寸必须完全一致。WebP 元数据里写着 800x450，而 JPEG 被清空了 EXIF，浏览器加载时就会重排布局——这不是 CSS 问题，是 intrinsic size 不匹配。
