Question

我正在使用<picture>标签。我的目标群体使用的是现代浏览器，因此Firefox supports WebP一经使用，就无需使用<img>标签。

现在：

<picture>
    <source srcset="image-200px.webp 1x, image-400px.webp 2x" type="image/webp">    
    <img src="image-200px.jpg" alt="Description">
</picture>

很快：

<picture>
    <source srcset="image-200px.webp 1x, image-400px.webp 2x">
</picture>

当不使用alt标签时，是否可以为<picture>实现<img>属性？

Answer 1

我的目标群体使用的是现代浏览器。 Firefox一旦支持WebP，就无需使用<img>标签

尽管您可能并不关心支持不支持<picture>元素的浏览器，但the HTML specification表示：

内容模型：

零个或多个源元素，后跟一个img元素，可以选择与脚本支持元素混合。

img元素是必需的，因此替代文本仍由alt元素上的img属性提供。

Answer 2

<picture>标签将退回到标签内写入的字符串，因此如果您编写

<picture>
    <source srcset="image-200px.webp 1x, image-400px.webp 2x">
    Some description

</picture>

如果浏览器不支持该标记或图像不可用，您将看到说明。

<picture>标签是否具有'alt'属性？ —用例：不带<img src=""/>的图片元素

2 个答案: