srcset 本身不压缩图片也不自动降级，仅提供候选图列表；真正起作用的是文件存在性、尺寸匹配度及服务器返回的 Content-Type 是否正确。
srcset 本身不压缩图片，也不自动降级——它只是告诉浏览器“有哪些图可选”，真正起作用的是你提供的文件是否真实存在、尺寸是否匹配、服务器是否返回正确 Content-Type。
srcset + sizes 怎么配才不白写
只写 srcset 不配 sizes，Chrome 默认按 100vw 加载最大图，Safari 可能直接忽略整组；sizes 不是建议值，而是浏览器预加载决策的依据。
-
sizes必须用媒体条件 + 宽度值，例如sizes="(max-width: 768px) 100vw, 50vw"，且要和实际 CSS 布局完全对齐（比如容器被max-width: 600px限制，但sizes写了768px，小图永远不生效） -
srcset中每个候选图必须带w描述符（如photo-400w.jpg 400w），不能混用x和w，否则部分浏览器跳过整组 - 所有图的原始像素宽高必须一致（用
file photo.jpg验证输出是否都含明确800 x 450），否则切换时拉伸或重排 -
src属性仍需保留，它是 IE11 等旧浏览器的唯一入口，不能留空或指向 404 路径
picture + source 实现格式降级时 type 为什么总失效
type="image/avif" 写对了，但浏览器就是不加载 AVIF？大概率不是 HTML 写错了，而是链路中某处断了。
- 服务器返回的响应头
Content-Type必须精确等于image/avif（不能是application/octet-stream或空），Nginx 需配types { image/avif avif; }，CDN 要透传Accept: image/avif -
<source></source>顺序必须严格：AVIF 放最前，WebP 次之，JPEG/PNG 必须落在<img src="fallback.jpg" alt="HTML图片压缩srcset降级结合教程" >里，不能写成第三个<source></source> - 本地双击打开 HTML（
file://协议）时，多数浏览器会跳过所有<source></source>，只走<img alt="HTML图片压缩srcset降级结合教程" >—— 开发阶段务必用本地服务测试（如python3 -m http.server） -
<img alt="HTML图片压缩srcset降级结合教程" >的src是强制兜底，不是可选项；路径必须真实可访问（推荐根路径/static/photo.jpg），别用./photo.jpg或带查询参数的动态地址（如?format=avif）
onerror 动态降级为什么有时不触发或无限循环
onerror 是轻量 fallback 手段，但它的触发时机晚于渲染，且极易误用。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 必须内联书写：
<img src="a.avif" onerror="this.onerror=null; this.src='/fallback.jpg';" alt="HTML图片压缩srcset降级结合教程" >，绑定事件监听器可能来不及捕获首次失败 -
this.onerror=null必须加，否则备用图再失败会无限重试（尤其当/fallback.jpg也 404 时） - 不要在
onerror中加载未压缩大图，应指向已压过的 WebP 或 PNG 备用图；若连 fallback 都不可靠，建议插入内联 SVG（无 HTTP 请求） -
onerror不区分失败类型（404 / CORS / MIME 错误），也无法捕获解码失败；对首屏关键图，优先靠<picture></picture>静态降级，onerror仅作最后一道防线
电商详情页图片降级最容易漏掉的三个硬性条件
电商图一旦降级失效，用户看到的就是空白商品图——这不是体验问题，是功能断裂。
- CDN 返回 AVIF/WebP 时，响应头必须含
Vary: Accept，否则运营商缓存可能把 AVIF 版本错发给 Safari 12 用户，结果静默白屏 - fallback JPG 也要响应式：不能只给一张
product-800.jpg，必须同步生成product-400.jpg、product-1200.jpg并写进<img srcset="..." alt="HTML图片压缩srcset降级结合教程" >，否则移动端加载大图更慢 - 关键图（主图、参数图）禁用懒加载：
loading="lazy"对<picture></picture>内部<source></source>无效，且在旧 WebView 中会被忽略；若src为空或错误，图直接消失
真正决定降级成败的，从来不是标签嵌套多深，而是每张图的原始尺寸是否一致、每个响应头是否精准、每个路径是否在任意路由下都可达。这些点一漏，<picture></picture> 就退化成装饰性代码。
