优化视网膜显示屏的网站图像

Question

我一直在努力寻找一种很好的方法来解决视网膜时代一个非常普遍的问题。

假设给出以下内容：

• 创建包含响应式图像的网站
• 没有 CSS 背景图像
• 网站的基本功能必须在没有JS的情况下工作
• 网站图像必须针对视网膜显示器进行优化。

解决此问题的一种简单方法可能是这样的：

<img src="img.jpg" data-highres="[e-mail]" />

并编写某种JS以在检测到视网膜设备时将img.jpg与[e-mail]交换。这将起作用，但是如果我在视网膜设备上进入网站，.jpg img 和 [e-mail] 都会被加载。不是很带宽友好:(

是否可以在加载原始 src 之前以某种方式拦截和更改图像的 src？

或者你们中有人有另一种解决问题的方法吗？

Answer 1

将来，您可能可以使用图片元素。与此同时，我看到的唯一可能有效的方法是：

1. 将div 或 span 放在您想要图像的位置。设置其样式以具有图像的尺寸和布局。添加某种识别标记，以便您可以找到它（例如 class="retina-image" ）
2. 存储有关元素上或元素中不同大小的图像的信息（例如，使用 data-something 属性）
3. 在div 内放一个<noscript><img src="..." alt="..."></script>
4. 在 DOM 就绪时：
   1. 使用 JS 查找具有步骤 1 中标识符的所有元素
   2. 检测所需的图像类型
   3. 找到告诉您要用于该图像的网址的属性
   4. 将映像添加到步骤 1 中的容器内的 DOM

这是图片填充库使用的方法。

Answer 2

这可能是火焰诱饵，但这是我的两分钱：

对带宽的担忧主要是移动平台问题。考虑到大多数现代移动平台现在都采用高像素密度显示器，这些设备对高分辨率图像的需求将相当高。当您可以在 2% 的时间内提供 100% 的分辨率时，为什么要在 90% 的时间内提供 3 倍的图像分辨率（低分辨率和高分辨率图像）？

因此，在某些情况下，仅提供更高分辨率的图像（将其宽度/高度样式减半）并将其保留在那里可能更容易 - 从而在其他地方节省（昂贵的）时间和精力。在一个一切似乎都是妥协的行业中，这有时作为一种方法最有意义。

Answer 3

我认为昆汀基本上回答了你的问题。

我可以补充的是，虽然有一个没有 src 的 img 元素，但从技术上讲，它不是按照规范的，省略它不会破坏你的代码，你会避免预加载。然后你可以使用 JavaScript 进行<img data-src="" data-src2="">和交换图像。<noscript>元素可能是执行此操作的"正确"方法，但它使代码非常冗长，我听说一些浏览器也会预加载<noscript>图像。

我遇到的一项使图像响应式的服务（包括Retina显示器）是Pixtulate。它们还提供了JavaScript，以便在页面完成加载之前正确调整大小并替换您的img.src url。应该很简单。

Answer 4

如果您使用window.devicePixelRatio执行某些操作并循环访问具有data-highres属性的图像。

这很粗糙，但你明白我的漂移。

 $(document).ready(function() {
     if (window.devicePixelRatio > 1) {
         // retina
     } else {
         // default
     }
 });

使用空白/清晰的 1px gif

<img src="clear.gif" data-basesrc="img1" />

然后使用basesrc属性并在JS中附加相应的文件名。