WebP图片在Safari上不显示怎么办？

仙仙 ☘︎ 提问于 2026-03-30 21:55:14 阅读 3

优化

我最近把项目里的JPG和PNG都转成WebP格式了，体积小了很多，但在Safari上图片直接裂开不显示。查了下说Safari 14之前不支持WebP，但用户还在用老版本，这咋办？

试过用<picture>标签做降级，但写法不太确定对不对，现在代码是这样的：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="示例图">
</picture>

这样写在Chrome里没问题，但在Safari 13上还是加载不了图片，是不是哪里漏了？

WebP格式资源优化

我来解答赞 2 收藏

反馈

1 条解答

伊芃 ☘︎ Lv1

你这个写法基本是对的，但有个细节要注意。

<picture>

  <source srcset="image.webp" type="image/webp">

  <img src="image.jpg" alt="示例图" loading="lazy">

</picture>

首先把 img 标签加上 loading="lazy" 虽然不是必须，但能优化性能。重点是确保 fallback 的 JPG 图片路径正确。

另外建议检查下文件名大小写是否一致，Safari 对路径很敏感。要是还不行，可能是 WebP 支持问题。

说到浏览器兼容，Safari 真的是让人头疼，尤其是老版本。如果实在要支持 Safari 13及以下，建议用 JavaScript 做个检测，不支持 WebP 就直接加载 JPG。

这种场景我通常会写个简单函数：

function supportsWebP() {

  var elem = document.createElement('canvas');

  if (!!(elem.getContext && elem.getContext('2d'))) {

    return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;

  }

  return false;

}

这东西虽然麻烦，但没办法，谁让苹果更新这么慢呢。

2026-03-30 22:11