当想要为用户设备提供最合适的图像时,潜在资源列表可以在大小/比率/像素密度等方面快速增长。
使用图片填充,我们可以使用多个srcset
属性将特定资产定位到给定规则。我目前正在处理的一个示例如下所示:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://dummyimage.com/360x583/707070" media="(min-width: 1200px)">
<source srcset="http://dummyimage.com/293x476/707070, http://dummyimage.com/586x952/707070 2x" media="(min-width: 992px)">
<source srcset="http://dummyimage.com/720x455/707070" media="(min-width: 768px)">
<source srcset="http://dummyimage.com/330x209/707070, http://dummyimage.com/660x418/707070 2x">
<!--[if IE 9]></video><![endif]-->
<img srcset="http://dummyimage.com/330x209/707070" alt="Item Image">
</picture>
这当然不可怕,但它又开始变得非常冗长了。为同一图像指定了 6 个不同的来源,并且仅包括 2 个“双密度”视网膜图像。我们还需要提供一个非常虚假的<video>
标签以避免 IE9 问题。
我们应该为所有图像尺寸提供双密度资源,还是明确假设 2x 图像显示仅在某些屏幕分辨率下可用(这似乎是一个很大的假设)。
同样,我们是否应该为我们的任何/所有资源提供 3 倍的图像分辨率?
如果其中任何一个的答案是肯定的,我们可以看到对于一组非常标准的目标设备宽度(这些是 Bootstrap xs
、sm
和值) md
,lg
我们很可能最终不得不为每个“图片”提供 8 个甚至 12 个资源.
那么,这仅仅是当前最好的状态吗?(图片填充肯定有帮助)。还是试图为每一个过度设计问题的可能性指定一个特定的资源?
更新 有关最近的方法,请关注响应式图像社区组的进展