srcset 与 sizes 必须配对使用，否则带 w 描述符的 srcset 项失效；需用 实现 AVIF/WebP 格式回退；首屏图禁用 loading="lazy"；必须设置 width 和 height 防止布局偏移。
srcset + sizes 必须配对使用，否则浏览器忽略 w 描述符
只写 srcset 不写 sizes，浏览器会退回到默认行为：用 src 值加载图片，srcset 中带 w 描述符的项全部失效。这不是 bug，是规范强制要求——sizes 是告诉浏览器“这张图在页面上实际占多宽”，没有它，浏览器无法把 480w 这类值映射到当前渲染上下文。
常见错误现象：srcset 里写了 img-400.jpg 400w, img-800.jpg 800w，但图片始终加载 800px 版本，控制台 Network 面板看不到切换逻辑。
-
sizes值必须是媒体条件 + 宽度，例如"(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px" - 媒体条件顺序重要：从左到右匹配第一个成立的，不支持嵌套或逻辑运算符
- 如果所有条件都不成立，浏览器 fallback 到最后一个宽度值（不是
src） - 避免写死像素值如
"600px"，优先用vw或相对单位，适配缩放和横竖屏切换
现代格式（AVIF/WebP）必须用 回退，![HTML怎么利用现代规范优化srcset并向下兼容降级]()
不支持格式协商
srcset 只管尺寸/密度选择，不管 MIME 类型。想让支持 AVIF 的浏览器加载 .avif，不支持的加载 .webp 或 .jpg，必须用 <picture></picture> 结构，靠 <source></source> 的 type 属性触发格式检测。
容易踩的坑：有人把 AVIF 放进 srcset 当作普通 URL 写进去，结果 Safari 和旧版 Chrome 直接报错或静默失败。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<source></source>按顺序匹配，第一个type被支持且满足media条件的生效 -
<img alt="HTML怎么利用现代规范优化srcset并向下兼容降级" >标签必须作为<picture></picture>的最后一个子元素，它是所有<source></source>都不匹配时的最终 fallback - 不要省略
src属性，否则 IE11 和部分低版本安卓 WebView 会显示空白 - AVIF 文件需确认服务端已配置正确 MIME：
image/avif，否则 Nginx/Apache 会返回 404 或下载而非渲染
loading="lazy" 与 srcset 协同时，首屏图必须显式禁用 lazy
浏览器对 loading="lazy" 的实现是基于滚动距离预判，但首屏图片如果也加了该属性，在某些低端 Android 设备或弱网环境下，可能被判定为“尚未进入视口”而延迟加载，造成白屏或 CLS（布局偏移）。
更隐蔽的问题：当 srcset + sizes 已配置好，但首屏图仍用了 loading="lazy"，Lighthouse 会给出“Offscreen images are not lazy-loaded”的警告，其实它已经 lazy 了——只是不该 lazy。
- 首屏图片（
position: absolute、fixed或top: 0区域内）必须移除loading="lazy"，或设为loading="eager" - 非首屏图片建议加
decoding="async"，避免解码阻塞主线程 - 慎用
fetchpriority="high"：仅对关键资源（如 banner、logo）设置，滥用会挤占其他资源带宽
宽高属性缺失会导致 layout shift，且影响 LCP 计分
即使你用了 srcset 和 sizes，只要没写 width 和 height，浏览器就无法预留空间，图片加载完成前容器高度为 0，加载后突然撑开，触发布局抖动。这不仅影响用户体验，还会直接拉低 Core Web Vitals 中的 CLS 和 LCP 分数。
很多人以为 CSS 设置了 width: 100% 就够了，但浏览器解析 HTML 时需要的是 intrinsic size（固有尺寸），它来自 HTML 属性，不是 CSS。
-
width和height应填入图片原始尺寸（如 800×600），不是容器尺寸 - 响应式场景下，可用
aspect-ratio: 4 / 3配合width: 100%替代 height，但 IE 和部分旧安卓 WebView 不支持，所以仍建议保留 HTML 属性 - 构建工具（如 webpack、vite-plugin-image）可自动注入宽高，避免手写出错
真正难的不是写出 srcset，而是让每个参数都参与真实设备的渲染决策链：从 sizes 算出槽宽，结合 DPR 查表选源，再由 picture 做格式兜底，最后靠 width/height 锁定布局——漏掉任一环，降级就不是“优雅”，而是“裸奔”。
