picture元素-标题属性

Question

我正在使用图片元素来提供适当的webP图像，如下所示：

<picture>
<source srcset="picture.webp" type="image/webp">
<source srcset="picture.jpg">
<img src="picture.jpg" alt="alt">
</picture>

问题是我应该把title属性放在哪里。我应该把它放在img元素还是picture元素上？

Answer 1

我不同意以前的海报我将保持title在img元素上。

根据HTML5规范，picture元素是一个容器，并且依赖于img元素来呈现其源元素选择。事实上，img元素是picture的一个要求，而不仅仅是作为后备。因此，picture只是围绕img的一个空心包装，实际上什么都不做。img仍然是图像的主要传送带。

HTML规范接着说。。。

图片元素是一个容器，它为它包含img元素。。。

。。。然后

。。。图片元素本身不显示任何内容；它只是为其包含的img元素提供上下文，使其能够从多个URL中选择

这意味着img元素继续表示图像，因此在我看来必须有title元素。事实上，img元素的alt仍然有效，即使浏览器在img上选择了源图像，title仍然有效，这表明图像元素在显示器中是活动的。下面是我如何使用picture元素设计图像的示例。

<figure aria-labelledby="picturecaption1">
<picture id="picture1">
<source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
<source srcset="image.gif" type="image/gif" />
<img id="image1" alt="image:Image Alternate Text" title="The Image Description" src="image.jpg" width="200" height="200" loading="lazy" no-referrer="no-referrer" />
</picture>
<figcaption id="picturecaption1">My Image Caption</figcaption>
</figure>

Answer 2

您应该将title属性放在picture标记中，因为<picture>标记也支持HTML中的全局属性。

例如

<picture title="Your goes here">
<source srcset="picture.webp" type="image/webp">
<source srcset="picture.jpg">
<img src="picture.jpg" alt="alt">
</picture>