不会拖慢浏览器支持，但旧版Safari（≤13.1）、IE及旧Android WebView不识别.webp后缀，导致图片加载失败而显示空白，并非性能问题而是兼容性缺失。

为什么直接写 在部分浏览器里不显示

因为 WebP 格式在旧版 Safari（ 单靠 src 属性无法降级。浏览器遇到不认识的格式会静默失败，既不报错也不 fallback，结果就是空白。

必须用 容器 + 声明优先级，让浏览器自己选能加载的格式：

<picture><source srcset="photo.webp" type="image/webp"><source srcset="photo.avif" type="image/avif"><img src="photo.jpg" alt="描述文字"></source></source></picture>

• 按顺序匹配，第一个 type 被支持的就加载，不往下走
• 是强制兜底项，必须存在且带 src，否则整个 不渲染图片
• 不要省略 alt——它只在 上生效， 不支持该属性

srcset 和 type 能不能一起用

不能。srcset 是 和 都支持的属性，但语义不同：

• 在 上，srcset 只用于像素密度或视口宽度适配，不涉及格式切换
• 在 上，srcset 必须配合 type 使用，表示“这个 URL 提供的是这种格式”
• 想同时做「格式 + 尺寸」双维度适配？得嵌套：一个 写 WebP 的多尺寸资源，另一个写 JPEG 的多尺寸资源

错误写法（WebP 的 srcset 里混 JPEG 路径）：

浏览器会忽略 b.jpg，因为它不满足 type 声明。

AVIF 图片加了 还是加载不了

AVIF 支持比 WebP 更晚，Chrome 85+、Firefox 93+、Safari 16.4+ 才稳定支持。即使写了 type="image/avif"，也要确认两件事：

• 服务器是否正确返回 Content-Type: image/avif 响应头？Nginx/Apache 需手动配置 MIME 类型，否则浏览器可能拒载
• 文件是否真为 AVIF？有些工具导出的是伪 AVIF（实际是 HEIC 封装），可用 file photo.avif 或在线检测工具验证
• 别依赖 自动选最优——它只看支持性，不看网络质量。4G 下仍可能加载 AVIF，需结合 JS 检测 navigator.connection.effectiveType 动态插入

本地开发时 显示正常，上线后部分图变空白

常见原因是路径没对齐或大小写敏感：

• 检查所有 srcset 和 src 中的路径是否都是相对路径，且基准一致（比如都相对于 HTML 文件，而非 CSS）
• Linux 服务器默认区分大小写，Photo.JPG 和 photo.jpg 是两个文件；开发用 Windows 可能不报错，上线就 404
• 构建工具（如 Vite、Webpack）可能重命名图片但没同步更新 中的引用，建议用 import 方式引入图片路径，避免硬编码

最稳的验证方式：打开 DevTools → Network 标签页，过滤 img，点开每个请求，看 Status 是否为 200，Response Headers 里的 Content-Type 是否匹配 type 声明。