HTML图片降级怎么写？完整编写步骤一览-html教程-PHP中文网

src是必填兜底项，srcset是可选增强项；只写srcset不写src会导致ie11等老浏览器空白；src需指向可用基础图，srcset按密度或宽度提供多档图，sizes须精准匹配布局。

html图片降级怎么写？完整编写步骤一览

浏览器加载图片时，src 是必填兜底项，srcset 是可选增强项。如果只写 srcset 不写 src，老浏览器（如 IE11）或禁用 JS 的环境会直接不显示图片——不是模糊，是空白。

src 必须指向一张可用的、尺寸适中的基础图（比如 800px 宽的 WebP 或 JPEG）
srcset 里按像素密度或宽度提供多档图，格式统一用 WebP（现代浏览器支持好），再用 type 属性声明 MIME 类型
sizes 要写具体，不能只写 "100vw" 就完事；根据实际布局算出图片在视口中的预期宽度（例如 "(max-width: 768px) 100vw, 50vw"）

@@##@@

picture 元素才是真正的降级控制中枢，img 自身没有格式 fallback 能力。靠 source 的 type 属性触发浏览器自主选择，不依赖 JS。

每个 source 必须有 srcset（不能只写 src），且 type 值要精确匹配 MIME 类型（"image/webp"，不是 "webp"）
img 标签必须放在 picture 最后，作为所有 source 都不匹配时的最终 fallback
注意：Safari 14+ 才开始稳定支持 type="image/webp"，旧版 Safari 会跳过 WebP source 直接走 img

<picture><source type="image/webp" srcset="photo.webp"><source type="image/avif" srcset="photo.avif">
  @@##@@
</source></source></picture>

img 的 onerror 只捕获加载失败，不捕获格式不支持；而且它只在 DOM 渲染阶段生效，无法覆盖 picture 的原生格式协商逻辑。

不要用 onerror 替换 src 来“兜底 WebP”，因为此时浏览器已决定不用这张图，再改 src 也不会重试
真正可控的方式是：服务端根据 Accept 请求头返回不同格式（比如识别到 image/webp 不在 Accept 列表就发 JPEG），前端保持最简 img src="photo.jpg"
如果必须前端判断，可用 document.createElement('img').canPlayType('image/webp')（注意：这是试探性检测，非 100% 准确），但更推荐用 picture + type 让浏览器自己选

很多自动化方案默认只生成 WebP，却忽略两个关键事实：