HTML5中的<picture>元素是否使得"alt"属性过时了？

Question

我正在为一位摄影师/摄像师制作一个作品集，并尝试在移动设备上寻找快速加载和良好图像质量之间达成平衡。到目前为止，我倾向于使用picture元素，根据设备的最大宽度加载多个版本的图像，如下所示：

<picture>    
    <source media="(max-width: 360px)" 
            srcset="picture_small.jpg">

    <source media="(max-width: 640px)"
            srcset="picture_medium.jpg">

    <source media="(max-width: 1366px)"
            srcset="picture_large.jpg">

    <img src="picture_original.jpg" width="6000" height="4000"
         alt="Really usefull description for each image">
</picture>

我的担忧是，前三个版本的图片中“alt”属性将被用户代理完全忽略，希望搜索引擎能够使用它也是一种不现实的想法。

- Nelu

Answer 1

<picture>元素只是一个容器，其主要内容由<img>元素描述。而<source>仅描述不同的资源。因此，对于它们所有的元素来说，alt保持不变。

没有<img>元素就不能有picture元素。在标准中，alt是<img>元素的规范要求。

- Rob

---

谢谢快速回复。我曾经持有完全相同的观点，直到我尝试了实际操作：如果您在浏览器上尝试此示例并删除第一个来源的路径，则不会获取“alt”属性的内容。相反，它会跳到下一张图像。只有当没有任何图像可用时才会显示“alt”属性的内容。这让我想到该属性只适用于最后一张图像。 - Nelu