Javascript 优化视网膜设备的在线照片库

我有一个现有的网站（一个照片博客），它加载了Flickr的大部分照片。我想增强用户使用高分辨率屏幕的体验，并加载更高分辨率版本的照片，但我不确定最好的方式是什么

因为所讨论的图像不是UI元素，所以没有明智的方法用CSS解决这个问题。这就留下了客户端JavaScript或服务器端查找和替换特定图像模式（因为它们来自Flickr，所以很容易检测到，也很容易找到双尺寸图像的url）

对于客户端，我担心的是，即使常规大小的图像大小为500-800 KB，每个图库也可能有10-30个图像，这会导致视网膜用户使用大量多余的带宽

对于服务器端，确定请求是否来自视网膜设备显然很棘手。我有一个想法（我还没有测试出来），那就是运行一个JavaScript函数来检查

window.devicePixelRatio

，并相应地设置一个cookie，然后在每个连续的页面请求上，服务器都会知道设备是否是高分辨率的。这样一来，进入页面就会有非视网膜图像，但至少接下来的页面会立即加载高分辨率图像

---

这个提议的解决方案有什么缺陷吗？有更好的处理方法吗？

您可以在服务器上生成CSS，该服务器将在

背景图像

属性中链接到常规大小和双大小的图像。通过将CSS包含在

标记中并引用仅存在于该页面上的类/ID，每个页面的CSS都可以很容易地有所不同。这将解决流量问题，因为大多数现代浏览器不会为其他DPI加载图片

另一个解决方案（尽管更糟糕）将不仅仅是设置cookie，而是使用JavaScript加载图像。这将解决最初的第一页问题，但会稍微降低页面渲染速度