为摄影师/摄影师制作作品集,并试图在移动设备上快速加载和良好图像质量之间找到一个很好的平衡点。 到目前为止,我热衷于在图片元素上下注,根据设备最大宽度加载多个版本的图片,如下所示:
<picture> https://stackexchange.com/users/10606791?tab=reputation
<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”属性将被图片的前3个版本的用户代理一起忽略,希望搜索引擎使用它也是一个很长的镜头。
答案 0 :(得分:1)
<picture>
元素只是一个容器。 <img>
元素是描述其内容的主要部分。 <source>
仅描述了不同的来源。所以alt
对所有人来说都是一样的。
如果没有picture
元素,则不能拥有img
元素。 alt
是<img>
中的要求,是标准中规范的一部分。