HTML怎么使用picture标签协同srcset完成深度降级-html教程-PHP中文网

必须用包裹多个，每个配独立srcset+sizes，末尾的src是最终防线；中仍需srcset和sizes是因为type仅声明格式可用性，不解决分辨率适配问题，浏览器需据此选择最匹配尺寸的该格式图片。

html怎么使用picture标签协同srcset完成深度降级

必须用包裹多个，每个配独立 srcset + sizes，末尾的 src 是最终防线——少一个环节，降级就断在那儿。

为什么里还要写 `srcset` 和 `sizes`

同一个格式（比如 WebP）在不同设备上仍需分辨率适配：只声明“可用 WebP”，但不解决“该加载多大尺寸的 WebP”。浏览器会按你给的 srcset 列表和 sizes 声明，从中挑最匹配的 WebP 图；如果只写 src 不写 srcset，它就只能加载那一张图，高 DPR 设备会模糊，小屏手机又浪费带宽。

srcset 必须全用 w 描述符，如 photo-400w.webp 400w, photo-800w.webp 800w；混进 2x 会让 Chrome 直接跳过整条
sizes 值必须反映该实际渲染宽度，不是容器宽度。例如图片在移动端占满视口、桌面端固定 600px：sizes="(max-width: 768px) 100vw, 600px"
每个的 srcset 至少含两个档位（如 400w 和 800w），否则 Safari 可能忽略该

的匹配顺序和失效静默问题

浏览器从上到下扫描，遇到第一个 type 被支持 *且* srcset 中资源可请求（HTTP 2xx）的就加载，其余全部跳过——不报错、不提示、不 fallback 到下一个。写错顺序或 MIME 类型，新格式就永远不生效。

正确顺序： → → 。AVIF 放最前，旧 Safari 自动跳过；WebP 次之，覆盖 iOS 14+；是强制兜底，不是“备用”
type 必须是标准 MIME 类型：image/avif，不能写成 avif、.avif 或 image/avif+lossless
服务器返回 AVIF 文件时，响应头 Content-Type 必须严格等于 image/avif；若返回 application/octet-stream 或 image/jpeg，浏览器解码失败，但不会切到下一条

的 `src` 不是摆设，而是最后一道可用性门槛

所有都没匹配上？没问题，还在。但若它的 src 是空、相对路径错误、或指向 404，整个就退化为纯文本，连 alt 都可能不显示（IE11 下尤其明显）。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

src 必须指向静态可直访资源：推荐主站同域下的 /img/fallback.jpg，禁用带参数地址（如 logo.jpg?x-oss-process=style/small），Safari 对这类 URL 容易返回 406
开发时可用 base64 占位图保底：src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PC9zdmc+"，避免部署路径出错
必须设置 width/height 或 style="aspect-ratio: 4/3;"，否则加载前容器塌陷，引发布局抖动

验证是否真生效，别只看页面有没有图

页面显示正常 ≠ 降级链跑通。关键要看 Network 面板里浏览器到底发了哪个请求，以及失败时有没有退到的 src。

用 DevTools → Network → 勾选 Disable cache 和 Large rows，观察加载的 URL 后缀（.avif / .webp / .jpg）是否随设备模拟器 DPR 变化
手动把某个的 srcset 地址改成 404，看是否仍能加载的 src；若不能，说明路径本身也失效了
在无网络环境下刷新页面，确认是否仍能加载（此时所有请求必然失败）