html - html5 中的 <picture> 元素是否会使 "alt"属性过时?

标签 html mobile responsive-design responsive-images

为摄影师/摄像师制作作品集,并尝试在移动设备上的快速加载和良好图像质量之间找到良好的平衡。 到目前为止,我热衷于押注 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>

我担心的是,对于图片的前 3 个版本,“alt”属性将被用户代理一起忽略,搜索引擎使用它的希望也很渺茫。

最佳答案

<picture>元素只是一个容器。 <img>元素是描述其内容的主要部分。 <source>仅描述不同的来源。所以 alt对他们所有人来说都是一样的。

你不能有 picture没有 img 的元素元素。 alt<img> 中的要求并且是其标准规范的一部分。

关于html - html5 中的 <picture> 元素是否会使 "alt"属性过时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48207784/

相关文章:

javascript - 是否可以让按钮标签的 CSS 监听悬停和激活?

jquery - 在没有提交按钮的情况下使用 Enter 键提交表单?

html - 使元素填充可用高度

javascript - 响应式 Javascript/jQuery 图片库

javascript - 如何在 html 中单击按钮时更改图像(img URL 每次都来自服务器)

javascript - 确定移动设备是否有支持协议(protocol)的应用程序

html - rem 字体大小无法在 css 动画中正确呈现

android - Mobile Chrome 和 WebView 上的背景颜色显示不正确

html - 响应式设计垂直对齐问题

javascript - js很难围绕一个圆圈定位div