求教：webp格式，CSS两个Picture标签出问题，一个重复，一个不显示

Question

Wordpress, 购买的国外的模板，用常规图片格式是没问题的，但是用插件生成了WEBP格式图片，其他都正常，就这两个部分有问题！ 因为wordpress本身不支持webp，所以那些模板作者也不提供支持，只能到这来问了！

以下LOGO部分，重复显示了webp 和 png 的LOGO （即同时显示了两张图）

<picture class="normal-logo">
<source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/logo-3.png.webp"/>
<img src="https://www.xxx.com/wp-content/uploads/2018/08/logo-3.png" alt="xxx"/>
</picture>

以下一个区块的内容，图片不显示：（空白，不显示）

<picture class="img bg-image">
<source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg.webp 580w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-150x150.jpg.webp 150w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-320x320.jpg.webp 320w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-100x100.jpg.webp 100w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-40x40.jpg.webp 40w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-500x500.jpg.webp 500w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-30x30.jpg.webp 30w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-550x550.jpg.webp 550w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-32x32.jpg.webp 32w" sizes="(max-width: 580px) 100vw, 580px">
<img width="580" height="580" src="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg" alt="xxx Creative Life Store - Live A Creative Life with xxx!" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg 580w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-150x150.jpg 150w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-320x320.jpg 320w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-100x100.jpg 100w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-40x40.jpg 40w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-500x500.jpg 500w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-30x30.jpg 30w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-550x550.jpg 550w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-32x32.jpg 32w" sizes="(max-width: 580px) 100vw, 580px">
</picture>

网站地址没放！ 通过代码好像没看出哪有问题，出现这问题是为什么呢 ？

Answer 1

img是独立于picture的，如果浏览器支持两种格式，就会显示两张图。
picture下两个资源都用source标签引入，浏览器会显示支持的第一张图。