定义响应式、“艺术指导”、视网膜支持图像的最简洁方法是什么？答案

【问题标题】：What is the most concise way to define responsive, 'art-directed', retina-supported images?定义响应式、“艺术指导”、视网膜支持图像的最简洁方法是什么？
【发布时间】：2014-06-29 16:42:34
【问题描述】：

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

使用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 个“双密度”视网膜图像。我们还需要提供一个非常虚假的 <video> 标签以避免 IE9 问题。

我们应该为所有图像尺寸提供双倍密度资源，还是明确假设 2x 图像显示仅在某些屏幕分辨率下可用（这似乎是一个很大的假设）。

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

如果其中任何一个的答案是肯定的，我们可以看到，对于一组非常标准的目标设备宽度（这些是引导程序 xs、sm、md 和 lg 值），我们可能最终不得不为每张“图片”提供 8 个甚至 12 个资源。

那么，这仅仅是当前最好的游戏状态吗？（图片填充肯定有帮助）。还是试图为过度设计问题的每种可能性指定特定资源？

更新更多最新方法，请关注Responsive Images Community Group

【问题讨论】：

您是否有理由不尝试在服务器端选择和交付适当的图像？

标签： html css twitter-bootstrap responsive-design picturefill

【解决方案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

【讨论】：