直接写必然在Safari≤13.1、IE、旧版Android WebView中留白，因浏览器不识别image/webp MIME类型，既不请求也不报错；+是唯一可靠降级方案，但需确保type值严格正确、src为静态可直访路径且兜底图真实存在。
直接写 <img src="x.webp" alt="HTML图片降级配置错误解决方法" > 必然在 Safari ≤13.1、IE、旧版 Android WebView 中留白，这不是“兼容性差”，是浏览器压根不识别 image/webp MIME 类型，连请求都不会发。
为什么 <picture></picture> + <source type="image/webp"></source> 还是空白
常见错误不是语法错，而是逻辑断层：
-
type值写错：写成type="webp"或type="image/jpg"—— 必须严格为image/webp、image/jpeg、image/png、image/avif -
<source></source>全部加载失败（404 / 跨域 / 网络中断），但<img src alt="HTML图片降级配置错误解决方法" >也无效 → 整个结构退化为仅显示alt文本，而非备用图 -
<img alt="HTML图片降级配置错误解决方法" >的src指向带查询参数的路径（如logo.jpg?format=webp）→ 旧浏览器会发请求，但服务器可能返回 406 或损坏数据 -
<img alt="HTML图片降级配置错误解决方法" >的src不是静态可直访地址：比如用 CDN 动态转码 URL（?x-oss-process=image/format,avif）作兜底，旧浏览器根本无法解码
<source></source> 顺序和 media 属性怎么写才不被跳过
浏览器按从上到下逐条检查，满足「支持该 type」且「资源可加载」就停，不会继续往下看。任何一处写错，后续就全废：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
media必须是完整合法媒体查询：media="(max-width: 768px)"✅，media="max-width: 768px"❌（缺括号） - 避免临界重叠：
max-width: 768px和min-width: 768px在 768px 宽度下都命中，但只有前者生效；推荐用开区间：max-width: 767px→min-width: 768px→min-width: 1024px - AVIF 放最前，WebP 次之，JPEG/PNG 必须落在
<img alt="HTML图片降级配置错误解决方法" >的src里，不能塞进第三个<source></source> - 验证方式：打开 Chrome DevTools → Network 面板 → 切换设备尺寸 → 看发出的图片请求是否匹配你写的
media和type
断网或 JS 失效时，图片还能加载吗
能，但前提是降级不依赖 JS，且 HTML 结构自洽：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="HTML图片降级配置错误解决方法" >的src必须指向一个真实存在的、无需协商的 JPEG/PNG 地址，例如/images/logo.jpg，而不是/api/image?id=123 - 不要把关键图（如首屏 banner、商品主图）加
loading="lazy"；它们的src应该直接写死，不设data-src，不靠 JS 补充 - 如果用了
onerror写回退（如onerror="this.src='/fallback.jpg'"），确保 fallback 图本身绝对可用——它不能再触发第二次onerror - 服务端渲染（SSR）必须把首屏图片的
src渲染为真实路径，不能只留占位符等 JS 来填
最容易被忽略的一点：所有格式的图片宽高、裁剪比例、构图必须一致。否则 WebP 加载成功、JPEG 回退时，视觉跳变会比白屏更伤体验。
