css - 响应式网站的视网膜照片支持

Question

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

• Retina.js — 似乎显示背景，而不是内联图像:查找 @2x 文件名。
• Retinise.js — 使用 data-src，那是什么？浏览器支持如何？
• Automatic Conditional Retina Images — 使用 .htaccess mod_rewrite 和简单的 JS。

(我忽略了这里的 CSS 背景图片，只关心作为照片的 img 元素 — 忽略图形，因为我试图将它们作为 SVG 提供。)

我想确保支持 Retina 图像的设备获得完整的显示效果，而低带宽(即小屏幕)设备则不能(这样他们就不必同时下载两者)。

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

---

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

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

Answer 1

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

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

我已经在我现在创作的几个网站上使用了这个元素，都取得了很好的效果:)

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

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