定义响应式,艺术导向的视网膜支持图像的最简洁方法是什么?

时间:2014-05-12 10:49:55

标签: html5 css3 twitter-bootstrap responsive-design picturefill

当想要向用户设备提供最合适的图像时,潜在资源列表可以在尺寸/比率/像素密度等方面快速增长。

使用picturefill,我们可以使用多个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>

这当然不是terrible,但它又开始变得非常冗长。为同一图像指定了6种不同的来源,并且它们仅包括2倍的双密度&#39;视网膜图像。我们还需要提供一个非常虚假的<video>标记,以避免IE9的困境。

我们是否应该为所有图像尺寸提供双倍密度资源,或者明确假设2x图像显示仅在某些屏幕分辨率下可用(这似乎是一个非常大的假设)。

同样,我们是否应该为我们的任何/所有资源提供3倍的图像分辨率?

如果其中任何一个的答案都是肯定的,我们可以看到一组非常标准的目标设备宽度(这些是Bootstraps xssmmd和{{ 1}}值),我们最终可能需要为每个图片提供8个甚至12个资源。

那么,这只是目前最好的状态吗? (picturefill绝对有帮助)。或者是否试图为每个可能性指定特定资源来过度设计问题?

更新 有关更新的方法,请按照Responsive Images Community Group

上的进度进行操作

1 个答案:

答案 0 :(得分:1)

我刚刚在Jason Grigsby的这个主题上读了一篇非常精彩的文章。 http://blog.cloudfour.com/dont-use-picture-most-of-the-time/

<img src="cat_500px.jpg"
    srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
    width="500px" alt="lolcat">

这里有另一篇也许更具技术性的文章: https://dev.opera.com/articles/native-responsive-images/

编辑 同样重要的是,它实际上可以是有用的 http://caniuse.com/#feat=srcset