我是否需要为图片元素内的每个源重复 class 属性？(HTML5)

Question

我正在将我们的图像转换为 webp，这意味着我需要使用“图片”标签而不是“img”，因为图片允许不支持 webp 的设备和浏览器回退到 png 格式。

无论如何，我有一个看起来像这样的 img：

<img class="usp-pics pic1" src="/images/example.png" alt="" title="">

因此，将其转换为具有回退到 png 的能力的 webp 将如下所示：

<picture>
    <source srcset="/images/example.webp" type="image/webp">
    <source srcset="/images/example.png" type="image/png">
    <img class="usp-pics pic1" src="/images/example.png" alt="" title="">
</picture>

如果浏览器读取上述代码并获取第一个 webp 图像，它是否还会应用附加到 img 元素的类、alt 和标题标签，还是我需要为每个源重复它们，或者将它们添加到父图片标签？

我试图查找这个，但我找不到答案。也许是因为它很明显，或者也许是因为我用错误的词来描述这个问题。对不起，如果这已经在某处被覆盖了。

Answer 1

根据 MDN，该<picture>元素只是简单地获取 的内容<source>并将其放在由<img>标签定义的空间内：

浏览器会考虑每个子<source>元素并从中选择最佳匹配。如果未找到匹配项——或者浏览器不支持该<picture>元素——<img>则选择该元素的 src 属性的 URL 。所选图像随后显示在<img>元素占用的空间中。

（我的重点）

因此，我希望<img>标签上的类仍然会向最终用户显示，无论使用哪种（或任何）<source>材料。

我的测试：

但我没有检查过这个。所以我决定用图像类型（PNG/JPG/Webp）和<picture>元素运行一些测试：

.one {
  border: 3px solid #f00;
}
.two {
  border: 3px solid #0f0;
}
.thr {
  border: 3px solid #00f;
}
.fou {
  /* Picture Element */
  border: 3px solid #333;
  display: inline-block;
}

<picture class='fou'>
    <source srcset="https://www.gstatic.com/webp/gallery/3.webp" type="image/webp" class='thr'>
    <source srcset="https://developers.google.com/web/fundamentals/design-and-ux/responsive/img/art-direction.png" type="image/png" class='two'>
    <img src="https://images.pexels.com/photos/163016/crash-test-collision-60-km-h-distraction-163016.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" title="" class='one'>
</picture>

从上面的例子，以及通过编辑和使用它

• 重新整理<source>材料。

不难发现：

• 该<source>元素不是隐藏在页面上，但不包含图形内容。

• 无论<source>使用什么，<img>元素始终是包含图片图形（有时称为图像（WTF？））的元素。

• 所述<picture>容器对象总是存在，但如容器<figure>在HTML5。不应为 .css 等内容提供 CSS 样式<img>。

结论：

上述（和它的小提琴和编辑）示出了所有的元素都存在于HTML，但只有一个代码是该图像是<img>元件。

因此，您不应将任何样式或 CSS 应用于<source>元素，而应仅将容器样式应用于<picture>元素。

你问：

我是否需要为图片元素内的每个源重复 class 属性？

答案：

答案是否定的。您应该仅设置<img>元素的样式。

例子：

<picture>
    <source srcset="/images/example.webp" type="image/webp">
    <source srcset="/images/example.png" type="image/png">
    <img class="usp-pics pic1" src="/images/example.png" alt="something" title="">
</picture>