不会拖慢浏览器支持，但旧版Safari（≤13.1）、IE及旧Android WebView不识别.webp后缀，导致图片加载失败而显示空白，并非性能问题而是兼容性缺失。
为什么直接写 <img src="xxx.webp" alt="如何加载网页图片资源_IMG标签实现多格式图像展示" > 在部分浏览器里不显示
因为 WebP 格式在旧版 Safari（ 单靠
src 属性无法降级。浏览器遇到不认识的格式会静默失败，既不报错也不 fallback，结果就是空白。
必须用 <picture></picture> 容器 + <source></source> 声明优先级，让浏览器自己选能加载的格式：
<picture> <source srcset="photo.webp" type="image/webp"> <source srcset="photo.avif" type="image/avif"> <img src="photo.jpg" alt="描述文字"> </picture>
-
<source></source>按顺序匹配，第一个type被支持的就加载，不往下走 -
<img alt="如何加载网页图片资源_IMG标签实现多格式图像展示" >是强制兜底项，必须存在且带src，否则整个<picture></picture>不渲染图片 - 不要省略
alt——它只在<img alt="如何加载网页图片资源_IMG标签实现多格式图像展示" >上生效，<source></source>不支持该属性
srcset 和 type 能不能一起用
不能。srcset 是 <img alt="如何加载网页图片资源_IMG标签实现多格式图像展示" > 和 <source></source> 都支持的属性，但语义不同：
- 在
<img alt="如何加载网页图片资源_IMG标签实现多格式图像展示" >上，srcset只用于像素密度或视口宽度适配，不涉及格式切换 - 在
<source></source>上，srcset必须配合type使用，表示“这个 URL 提供的是这种格式” - 想同时做「格式 + 尺寸」双维度适配？得嵌套：一个
<source></source>写 WebP 的多尺寸资源，另一个写 JPEG 的多尺寸资源
错误写法（WebP 的 srcset 里混 JPEG 路径）：<source srcset="a.webp 480w, b.jpg 768w" type="image/webp"></source>
浏览器会忽略 b.jpg，因为它不满足 type 声明。
AVIF 图片加了 <source></source> 还是加载不了
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或在线检测工具验证 - 别依赖
<picture></picture>自动选最优——它只看支持性，不看网络质量。4G 下仍可能加载 AVIF，需结合 JS 检测navigator.connection.effectiveType动态插入<source></source>
本地开发时 <picture></picture> 显示正常，上线后部分图变空白
常见原因是路径没对齐或大小写敏感：
- 检查所有
srcset和src中的路径是否都是相对路径，且基准一致（比如都相对于 HTML 文件，而非 CSS） - Linux 服务器默认区分大小写，
Photo.JPG和photo.jpg是两个文件；开发用 Windows 可能不报错，上线就 404 - 构建工具（如 Vite、Webpack）可能重命名图片但没同步更新
<source></source>中的引用，建议用import方式引入图片路径，避免硬编码
最稳的验证方式：打开 DevTools → Network 标签页，过滤 img，点开每个请求，看 Status 是否为 200，Response Headers 里的 Content-Type 是否匹配 type 声明。
