2

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

（我在这里忽略了 CSS 背景图像，只关注img照片元素——忽略图形，因为我试图将它们作为 SVG 提供。）

我想确保支持视网膜图像的设备得到完整的说明，而低带宽（即小屏幕）的设备没有（这样他们就不必同时下载两者）。

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

似乎响应式图像仍然没有一致的最佳解决方案（关于带宽等），并且将其与视网膜图像相结合会使它变得更加复杂......

我之所以问，是因为 Retina.js 文档似乎暗示因为它使用data-src了 ，所以只下载了所需的图像——这是否意味着因为 Retina.js 使用src了它，所以两者都下载了？

4

3 回答 3

4

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

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

我已经在我现在创作的几个网站上使用了这个项目，结果都很好:)

至于较旧的浏览器支持，只要启用 JS，它就可以工作，因为 data-src 被替换为 src 属性。

要支持非 JS 浏览器，您可以只使用 no script 标签，如文档中所述。

于 2013-01-07T08:48:11.103 回答
2

我不确定响应式图像没有最佳解决方案，max-width:100%对我来说总是足够好。

data-rel属性是 HTML5 的新特性，允许您在不滥用属性的情况下向元素添加任何自定义数据。Bootstrap 大量使用data-属性，jQuery Mobile 也是如此。

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

于 2012-11-27T14:46:27.803 回答
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)]">
于 2014-02-19T22:32:55.010 回答