浏览器不加载 WebP 是因 type 值非法或服务器 Content-Type 不匹配，且需同时满足 media 查询和格式支持；兜底 img 必须用 JPEG 等兼容格式，srcset 应精简并配 sizes。
为什么写了 type="image/webp" 却没加载 WebP
浏览器不会“猜”你是不是想用 WebP，它只做两件事：检查 type 值是否合法、再确认服务器返回的 Content-Type 是否严格匹配。常见静默失败点包括：
-
type写错：比如type="webp"（缺image/）、type="image/webp;"（多分号）、type="image/jpg"（应为image/jpeg） - 服务器没配 MIME 类型：Nginx/Apache 未声明
image/webp或image/avif，返回text/plain或application/octet-stream，Safari 就直接跳过该<source></source> -
<source></source>没配srcset：只有type和media，但没给路径，等于空配置，浏览器忽略 - 顺序放错：把
type="image/jpeg"放最前，浏览器一匹配就停，后面更优格式永远不触发
<picture></picture> 中 media 和 type 是 AND 关系
一个 <source></source> 要生效，必须同时满足媒体条件和格式支持——不是“满足任一就行”。比如：
<source media="(min-width: 768px)" type="image/webp" srcset="hero-webp.webp"> <source media="(min-width: 768px)" type="image/jpeg" srcset="hero-jpeg.jpg">
在 800px 宽度的 Chrome 里，第一行会命中；但在 iOS 15 Safari（不支持 AVIF，WebP 支持但部分 CDN 返回头异常），可能两个都跳过，最终走 <img src alt="HTML source标签图片格式适配与加载性能提升" >。关键点：
-
media必须是完整媒体查询，media="max-width: 768px"❌（缺括号），media="(max-width: 768px)"✅ -
type不参与媒体判断，只管解码能力；即使media匹配，type不支持或服务器头不匹配，照样跳过 - 老浏览器（IE、Android 4.4 WebView）完全忽略
<source></source>，只读<img src alt="HTML source标签图片格式适配与加载性能提升" >，所以兜底图不能指向 WebP
如何避免 srcset 冗余拖慢解析与预加载
浏览器在 HTML 解析阶段就会扫描所有 srcset 候选项，哪怕某张图永远用不上，也会进预加载队列。常见冗余写法：
立即学习“前端免费学习笔记（深入）”；
- 堆砌所有宽度：从
320w到3840w每隔 100px 写一条，实际 CSS 只在768px、1200px两级断点切换布局 - 混用
w和x：同一srcset里出现"a.jpg 400w, b@2x.jpg 2x"，Chrome 可能整个值丢弃 - 没配
sizes：浏览器默认按100vw算，导致小屏设备也拉 1200w 图，浪费带宽
实操建议：只保留真实 CSS 布局中图片容器的渲染宽度点，例如 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，对应 srcset 仅写 "small.jpg 400w, medium.jpg 800w, large.jpg 1200w"。
<img alt="HTML source标签图片格式适配与加载性能提升" > 兜底必须带 src 和 alt，且不能是现代格式
<picture></picture> 本身不渲染，也不请求资源；真正决定是否显示、显示什么的，是最后那个 <img alt="HTML source标签图片格式适配与加载性能提升" > 标签。漏掉它，或它的 src 指向 WebP，在 IE 或旧 Android 浏览器里就是空白区域。
-
<img src="logo.webp" alt="Logo">❌：旧浏览器无法解码，页面无图 -
<img src="logo.jpg" alt="Logo">✅：JPEG 兼容性覆盖全部环境，alt保证无障碍和 SEO - 别依赖
loading="lazy"在<img alt="HTML source标签图片格式适配与加载性能提升" >上“救场”：懒加载只影响加载时机，不解决格式兼容问题 - 如果图片用于装饰（如分隔线、状态图标），优先考虑 CSS
background-image+@media，绕过 HTML 语义限制和格式兼容负担
最常被忽略的是服务器链路——CDN 或反向代理没透传 Accept 请求头，后端就无法根据 Accept: image/avif,image/webp 返回对应格式，<source></source> 再规范也没用。
