元素
元素
工具
博客
问答

WebP响应式图片怎么在不同设备上正确加载？

码农西西 阅读 39
优化

我用 <picture> 标签做了 WebP 的响应式图片，但发现有些老设备还是加载不了 fallback 的 JPG，页面直接空白了。是不是我的写法有问题？

我试过这样写：

<picture>
  <source media="(max-width: 768px)" srcset="image-mobile.webp" type="image/webp">
  <source media="(max-width: 768px)" srcset="image-mobile.jpg" type="image/jpeg">
  <source srcset="image-desktop.webp" type="image/webp">
  <img src="image-desktop.jpg" alt="示例图">
</picture>

但 Safari 13 以下的设备根本不显示图片，控制台也没报错，就是 img 标签没 fallback 成功，咋整？

WebP优化响应式图片
我来解答 赞 12 收藏
二维码
手机扫码查看
反馈
2 条解答
设计师玉鑫
设计师玉鑫 Lv1
问题出在你的 <source> 标签重复了同一个媒体查询，导致 fallback 没有生效。还有就是 Safari 13 以下不支持 WebP，所以需要确保 JPG 是默认 fallback。

改一下你的 <picture> 标签，这样写：



  

  

  

  

  示例图


注意最后加了一个默认的 JPG source，这样老设备也能加载 JPG 图片了。拿去改改试试。
点赞
2026-03-22 11:10
士懿
士懿 Lv1
这问题我遇到过，Safari老版本对的支持确实有点坑。你的写法基本没问题，但老Safari会犯傻。建议这么改：

1. 确保标签的src指向的是默认jpg，这样就算解析失败至少还有个保底
2. 加上sizes属性帮助浏览器决策
3. 最保险的做法是用JS兜底检测

试试这样改：



  

  

  

  示例图


如果还不行，可以用这个检测脚本放到footer里：

document.addEventListener('DOMContentLoaded', function() {

  const imgs = document.querySelectorAll('picture img');

  imgs.forEach(img => {

    if(!img.currentSrc || img.currentSrc.includes('webp')) {

      img.src = img.getAttribute('src');

    }

  });

});


插件可以试试ShortPixel或WebP Express，它们会自动处理这些兼容问题。不过手动改的话上面这招基本够用了，我在几个老项目里都这么搞定的。
点赞
2026-03-09 14:24
相关推荐
元素
元素
工具
博客
问答
登录/注册