优化 Retina 设备的在线照片库

Question

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

由于有问题的图像不是 UI 元素，因此无法使用 CSS 解决此问题。剩下的就是客户端 JavaScript，或者特定图像模式的服务器端查找和替换（因为它们来自 Flickr，所以很容易检测到并且很容易找出双倍大小图像的 url）。

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

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

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

Answer 1

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

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