Css 视网膜照片支持快速响应的网站

我遇到了一些脚本，用于将视网膜照片提供给具有2×像素密度的设备：

• -似乎显示背景，而不是内联图像：查找

  @2x

  文件名
• -使用

  数据src

  ，那是什么？如何支持浏览器
• -使用.htaccess

  mod_rewrite

  和简单JS

（我在这里忽略CSS背景图像，只关注照片中的

img

元素，而忽略图形，因为我试图将它们作为SVG。）

我想确保支持视网膜图像的设备获得完整的spiel，而低带宽（即小屏幕）的设备没有（因此它们不必同时下载）

哪种解决方案遵循移动优先和语义方法的最佳实践？

---

似乎响应图像仍然没有一个一致的最佳解决方案（关于带宽等），而将其与视网膜图像耦合会使其更加复杂

---

我这样问是因为Retinise.js文档似乎暗示，因为它使用

data src

，所以只下载所需的图像-这是否意味着由于Retina.js使用

src

，它同时下载这两种图像？

我不确定响应图像是否有最佳解决方案，

最大宽度：100%

对我来说一直都很好

data-

属性是HTML5的新属性，允许您在不滥用

rel

属性的情况下向元素添加任何自定义数据。Bootstrap大量使用

数据-

属性，jQuery Mobile也是如此

---

是的，我认为Retina.js确实（或至少曾经）为设备提供两种尺寸的图像，但只显示一种。如果Retinise克服了这一点，我会说这是一个巨大的好处

我编写了Retinise.js，因为很多视网膜解决方案实际上提供了这两个图像，这意味着用户需要大量带宽，通过使用自定义数据属性，您可以停止浏览器下载原始图像

但是，我的插件没有考虑用户的连接类型，例如3g与WiFi，因为目前除了进行简单的速度测试之外，没有其他方法可以检测到这一点，您可以修改我的插件以包括

我已经在我现在编写的几个网站上使用了该项目，都取得了很好的效果：）

对于较旧的浏览器支持，只要启用JS，数据src就可以使用src属性替换

---

对于非JS浏览器的支持，您可以只使用一个无脚本标记，如文档中所描述的。

< P>我刚刚开始使用ZURB基金会互通，并且我真的很喜欢它。

使用带有空src标记的数据交换属性，然后在基于正确src位置的内置查询或自定义@media查询中交换写入

下面是一个例子：

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">

这可能有点模棱两可，但我所说的“没有最佳解决方案”正是指这样的事情：让移动设备下载他们永远不需要的大文件（我会更正我的帖子，谢谢）。有趣的是，Retinise.js似乎克服了以使用HTML5

data-

属性为代价提供两个图像的问题，我认为，在旧浏览器上没有回退？好吧，在旧浏览器上，属性应该仍然会出现，并且您应该仍然能够从脚本中选择它们，唯一的问题是如果使用它们，例如，在具有html 4.01 doctype的文档中，它们将被标记为无效。它们不会造成任何实际问题，所以下面的图片将在IE6上呈现为图像

之前没有使用Retinise，我无法向您保证IE6不会爆炸，但是，我可以说，该属性将出现在IE6中，就像它出现在任何其他浏览器中一样。IE6是否可以处理retinise（或反之亦然），如果不进行测试，我就不知道了……retinise本身并不声称支持任何浏览器，所以我想你肯定知道的唯一方法就是测试它：）哇，谢谢你的输入！你能评论一下你的脚本如何叠加到

Retina.js

和

ACRI

？据我所知，我只有使用Retina.js的经验，它仍然下载原始图像和Retina版本，而我的插件只提供图像，而不需要两者，节省带宽。我不确定retina.js还提供了什么，但我的插件背后的想法是使它尽可能小和简单。如果你想要一个简单的插件来重定时你的图像，那么我认为它是完美的，如果你需要更多的功能，那么你可能最好找到其他东西。无论哪种方式，获得一些反馈并了解人们的想法都是非常好的。我还计划在不久的将来扩展它，包括一个速度测试，以限制3G连接上的视网膜图像。还需要注意的是，我的插件只重定时内联图像和背景图像，因为这些都可以在css中处理！谢谢你的好话，如果你有任何反馈或问题等，它现在在git hub上：）是的，我只会用有用的东西更新！另一个更新刚刚停止加载视网膜大小的图像，然后跳到正确的大小。欢迎使用StackOverflow，谢谢分享。至于这里的问题：交换依赖于JavaScript加载图像，搜索引擎依赖于

，等等——所以我不会说这是一种语义方法