优化 Retina 显示的网站图像答案

【问题标题】：Optimizing website images for Retina display优化 Retina 显示的网站图像
【发布时间】：2014-02-25 08:29:42
【问题描述】：

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

假设给出以下内容：

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

解决这个问题的简单方法可能是这样的：

<img src="img.jpg" data-highres="img@2x.jpg" />

如果检测到视网膜设备，则编写某种 js 将 img.jpg 替换为 img@2x.jpg。这可行，但如果我在视网膜设备上进入网站，img.jpg 和 img@2x.jpg 都会被加载。对带宽不太友好:(

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

或者你们有其他解决问题的方法吗？

【问题讨论】：

标签： javascript html css retina retina.js

【解决方案1】：

将来，您也许可以使用the picture element。与此同时，我见过的唯一可行的方法是：

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

这是the picturefill library使用的方法。

【讨论】：

【解决方案2】：

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

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

因此，在一些场景中，只提供更高分辨率的图像（将它们的宽度/高度样式减半）并保持不变可能会更容易 - 因此在其他地方节省（昂贵的）时间和精力。在一个一切似乎都是妥协的行业中，这种有时是最有意义的一种方法。

【讨论】：

【解决方案3】：

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

我可以补充的是，虽然没有 src 的 img 元素在技术上不符合规范，但省略它不会破坏您的代码，并且您将避免预加载。然后你可以只使用<img data-src="" data-src2=""> 并使用 JavaScript 交换图像。 <noscript> 元素可能是执行此操作的“正确”方式，但它使代码非常冗长，而且我听说一些浏览器也会预加载 <noscript> 图像。

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

【讨论】：

【解决方案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 中附加适当的文件名。

【讨论】：

这如何阻止正在加载的图像的原始 src？
但是对于普通用户来说，如果没有 JS，网站将无法运行，这是列出的要求之一？
那你选择我原来的答案更好，因为它有一个后备。