HTML图片降级逻辑怎么写最简洁-html教程-PHP中文网

响应式图片降级应优先使用 srcset + sizes 和 picture 实现，而非手写 js 判断；src 必须存在作保底，sizes 需真实反映渲染宽度，webp/avif 降级必须用 picture + source，cdn 自动降级不能替代语义化 html 标记。

html图片降级逻辑怎么写最简洁

img 的 srcset + sizes 已经能自动降级，别手写 JS 判断

浏览器原生支持响应式图片降级，srcset 和 sizes 配合就能让不同 DPR、不同视口宽度的设备自动选最合适的图，比 JS 检测 window.devicePixelRatio 或 matchMedia 更可靠、更早触发（在 HTML 解析阶段就发起请求）。

常见错误是只写 srcset 不配 sizes，导致浏览器按 100vw 猜测宽度，选图失准；或者把高倍图全塞进 srcset 却没提供 fallback 的 src，网络失败时直接显示缺省图标。

src 必须存在，作为无 srcset 支持时的保底（IE11、老安卓 WebView）
sizes 要真实反映该 img 在页面中的渲染宽度，比如 sizes="(max-width: 768px) 100vw, 50vw"
srcset 中的描述符用 x（如 2x）适合固定宽高比场景，用 w（如 800w）配合 sizes 更灵活

需要 JS 干预时，只在加载失败后 fallback，不提前预测

手动 JS 降级只适用于特殊场景：比如图床不可控、CDN 返回 404、或需根据用户带宽偏好（如“省流量模式”）动态切换。此时应在 img 的 onerror 回调里换源，而不是 onload 前就猜。

提前用 JS 判断 navigator.connection.effectiveType 或 screen.availWidth 换图，容易和浏览器原生逻辑冲突，且无法覆盖资源加载中途失败的情况。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

用 img.onerror = () => { img.src = 'fallback.jpg'; }，简单直接
避免重复触发：换源后记得清除 onerror，或用 once 事件监听
如果 fallback 图也要降级，就让它自己也带 srcset —— 降级逻辑可以嵌套

WebP / AVIF 降级必须靠 `picture`，`img` 自身不支持格式协商

img 的 src 只能是一个 URL，没法告诉浏览器“这个地址可能是 WebP，不行就试 JPEG”。格式级降级必须用 picture + source，靠 type 属性让浏览器自主选择。

漏掉 img 标签作为最后 fallback，会导致不支持 picture 的旧浏览器（如 IE、UC 旧版）直接空白。

顺序很重要：source 从高优到低优排列，浏览器取第一个支持且可加载的
每个 source 可独立配 srcset 和 sizes，比如 <source type="image/avif" srcset="a.avif 1x, a@2x.avif 2x"></source>
必须以 <img src="fallback.jpg" alt=""> 结尾，这是整个 picture 的兜底