我遇到了一些脚本，用于将视网膜照片提供给具有2倍像素密度的设备：
@2x文件名。data-src，那是什么？浏览器如何支持？mod_rewrite和简单的JS。（我忽略了CSS背景图片，仅关注作为照片的img元素 - 忽略图形，因为我尝试将其作为SVG服务。）
我想确保支持视网膜图像的设备获得完整的间距，而低带宽（即小屏幕）的设备则不会（并且因此不必同时下载）。
哪种解决方案遵循移动优先和语义方法的最佳实践？
似乎响应式图像仍然没有一致的最佳解决方案（关于带宽等），并且将其与视网膜图像耦合使得它更复杂......
我问，因为似乎Retinise.js文档暗示因为它使用data-src，只下载了所需的图像 - 这是否意味着因为Retina.js使用src下载既？
答案 0 :(得分：2)
我不确定自适应图像没有最佳解决方案，max-width:100%对我来说一直运作良好。
data-属性是HTML5的新增功能，允许您在不滥用rel属性的情况下向元素添加任何自定义数据。 Bootstrap大量使用data-属性，jQuery Mobile也是如此。
是的，我认为Retina.js（或者至少习惯）向设备提供两种尺寸的图像，但只显示了一种。如果Retinise克服了这一点，我会说这是一个巨大的好处
答案 1 :(得分：0)
我刚刚开始使用ZURB Foundation Interchange，到目前为止我真的非常喜欢它。 http://foundation.zurb.com/docs/components/interchange.html
您将数据交换属性与空src标记一起使用，然后在基于内置或自定义@media查询的正确src位置中交换写入。
以下是一个例子：
<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">