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

Question

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

无论如何，我有一个看起来像这样的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

Acccording to 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> 容器对象始终存在，但它是一个容器，例如 HTML5 中的 <figure>。不应为 <img> 等内容赋予 CSS 样式。

结论：

上面的代码（以及它的修改和修改）表明所有元素都存在于 HTML 中，但唯一是图像的是<img> 元素。

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

你问过：

是否需要为图片元素中的每个源重复类属性？

答案：

答案是否。您应该为<img> 元素设置样式ONLY。

例子：

<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>