React项目中同时使用WebP和AVIF图片导致旧浏览器白屏怎么办？

司徒红瑞提问于 2026-02-04 19:03:28 阅读 14

优化

大家好，我在React项目里用标签的srcset属性同时提供webp和avif格式图片，结果在IE11和老版安卓机上直接显示空白了。之前用Can I Use查过这两种格式的支持情况，确实这些旧浏览器不支持…

我尝试过这样写代码：srcset="image.webp,type=image/webp, image.avif,type=image/avif"，但控制台报错说类型不受支持。后来改成用picture标签包裹，像这样：


<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="fallback">
</picture>

结果在旧浏览器里还是白屏，但这次没有报错。难道是我的图片格式有问题吗？用Adobe的Exporter导出的时候选的85%质量，会不会是压缩参数的问题？

图片优化资源优化

我来解答赞 4 收藏

反馈

2 条解答

红芹（打工版） Lv1

问题出在旧浏览器压根不识别AVIF和WebP，picture标签的后备方案没生效。你写的结构是对的，但旧浏览器会跳过所有不支持的source类型，直接执行img标签里的内容。如果这里只放了webp或avif图片，那它还是无法显示。

正确的做法是在最后一个img标签里换成兼容性最强的格式，比如JPG或者PNG。你已经放了image.jpg进去，那这步是对的。这时候白屏只能说明这个image.jpg本身有问题，或者路径没写对。

检查一下image.jpg是否存在、路径是否正确加载。另外Adobe导出的JPG如果勾选了某些高级参数，可能会生成浏览器不支持的JPG变种。建议用普通方式另存为一次，确保兼容性。可以用Photoshop导出为Web所用格式，或者用免费工具像Squoosh来转换。

2026-02-06 18:04

UX-怡博 Lv1

你这个写法已经是对的了，问题不在图片质量，是旧浏览器对 AVIF 和 WebP 的支持太差，而且即使用了 picture 标签，有些浏览器还是会“卡壳”，尤其 IE11 对 source 标签支持不完全。

解决办法其实也不复杂，就是别指望它能自动降级，得手动加判断。

你可以这样处理：用 JS 检测浏览器是否支持 WebP 或 AVIF，不支持的话就直接换回 JPG。

复制这个检测代码：

function supportsWebp() {

  return new Promise((resolve) => {

    const img = new Image();

    img.onload = () => resolve(img.width === 1);

    img.onerror = () => resolve(false);

    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBAAAAAwwBkCAwBkAgAAQSsSAswAAAKAAAcQ4GQA';

  });

}

然后在组件里用：

const [useFallback, setUseFallback] = useState(true);



useEffect(() => {

  supportsWebp().then(supported => {

    setUseFallback(!supported);

  });

}, []);



return (

  <picture>

    {!useFallback && <source srcSet="image.avif" type="image/avif" />}

    {!useFallback && <source srcSet="image.webp" type="image/webp" />}

    <img src="image.jpg" alt="fallback" />

  </picture>

);

这样就能自动退化到 JPG，IE11 和老安卓也能正常显示图片了。

另外，WebP 和 AVIF 的 base64 检测也可以做，但上面这个方案已经够用，没必要加戏了。

2026-02-04 19:04