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

Question

我在开发 .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}
}

Answer 1

它显示每个图像的两个副本，因为每个图像格式都有一个 <img> 标签，包括现代格式。这并不是后备图片的工作原理。

如果您使用 <picture> 元素，它应该只包含 <img> 元素，以便与旧版浏览器向后兼容。针对现代浏览器的现代图像格式应该放在 <source> 元素中。

读这个：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Use_modern_image_formats_boldly

这是来自 Mozilla 文档的示例代码，但使用的是您的文件名：

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

该文档页面还讨论了如何使用 size 属性来制作特定于分辨率的回退而不是特定于格式的回退。

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

Image type webp. The browser load two formats

html

webp