Html 图像类型webp。浏览器加载两种格式

在实现

.webp

和

.png

图像时，我在开发过程中出错

我没有让浏览器显示一个（或另一个）选项，现在我的问题是浏览器加载两个图像（webp+png）并以块的形式显示它们

当然，我做错了什么，我也不确定img标记是否正确，但我正在

.css

中使用它们

知道吗​​我的错误

提前谢谢

HTML:

<link rel=preload as=script href="js/modernizr.min.js"/>

<div id="info-1">
  <picture>
    <img class="imgesc" source srcset="img/Camiseta-1.png" type="image/png" width="725" height="1024" alt="imagen">
    <img class="imgesc" source srcset="img/Camiseta-1.webp" type="image/webp" width="725" height="1024" alt="imagen">

    <img class="imgmov" source srcset="img/Camiseta-1-Land.png" type="image/png" width="1024" height="725" alt="imagen">
    <img class="imgmov" source srcset="img/Camiseta-1-Land.webp" type="image/webp" width="1024" height="725" alt="imagen">
  </picture>
</div

#info-1 img {
  width:100%;
  height:auto;
  max-width:500px;
  margin:0 auto
}

.imgmov {
display:none
}

@media screen and (max-width:999px) and (orientation:landscape){
  .imgesc{display:none}
  .imgmov{display:block}
  #info-1{max-width:310px;margin:auto}
}

---

它显示每个图像的两个副本，因为您有一个

---

该文档页还讨论了如何使用

size

属性来进行特定于解决方案的回退，而不是特定于格式的回退。

谢谢@Andrew Koster。。。我没有考虑一些基本的细节。当做

<picture>
  <source type="image/webp" srcset="img/Camiseta-1.webp"> 
  <img src="img/Camiseta-1.png" alt="imagen">
</picture>