为摄影师/摄像师制作作品集,并试图在移动设备上的快速加载和良好图像质量之间找到良好的平衡。到目前为止,我热衷于押注图片元素根据设备最大宽度加载多个版本的图像,如下所示:
<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
都保持不变。
没有img
元素就不能有 picture
元素。 alt
是<img>
的要求,也是标准中规范的一部分。