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

Question

我有一个现有的网站（照片博客），可以加载来自Flickr的大部分照片。我希望为具有高分辨率屏幕的用户增强体验并加载更高分辨率版本的照片，但我不确定哪种方式最佳。

由于所讨论的图像不是UI元素，因此没有合理的方法来解决CSS的这个问题。这留下了客户端JavaScript或服务器端特定图像模式的查找和替换（因为它们来自Flickr，它易于检测并且很容易找出双尺寸图像的URL）

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

对于服务器端，确定请求是否来自视网膜设备显然很棘手。我有一个想法（我还没有测试过），就是运行一个JavaScript函数来检查window.devicePixelRatio并相应地设置一个cookie，然后在每个连续的页面请求上，服务器会知道该设备是否为高分辨率或不。这使得入口页面具有非视网膜图像，但至少所有下一个图像都会立即加载高分辨率图像。

这个提出的解决方案是否有任何陷阱？有没有更好的方法来处理它？<​​/ p>

Answer 1

您可以在服务器上生成CSS，该CSS将链接到background-image属性中的常规大小和双倍大小的图像。通过将CSS包含在<style>标记中并引用仅存在于此页面上的类/ ID，可以轻松地为每个页面添加CSS。这将解决流量问题，因为大多数现代浏览器不会为其他DPI加载图片。

其他解决方案（虽然更糟）不只是设置cookie，而是使用JavaScript加载图像。这将解决初始首页问题，但会使页面渲染速度变慢。