Question

我一直在努力寻找一种解决视网膜时代常见问题的好方法。

让我们说以下内容：

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

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

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

如果检测到视网膜设备，写一些js与img.jpg交换img.jpg。这可行，但如果我在视网膜设备上进入网站，将加载img.jpg和img@2x.jpg。不是带宽友好:(

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

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

Answer 1

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

将div或span放在想要图像的位置。将其设置为具有图像尺寸和布局的样式。添加某种识别标记，以便您可以找到它（例如class="retina-image"）
存储有关您在元素上或元素中的不同尺寸图像的信息（例如，使用data-something属性）
在div

<noscript><img src="..." alt="..."></script>

关于DOM准备好了：
1. 使用JS查找具有步骤1中标识符的所有元素
2. 检测您想要的图像类型
3. 找到告诉您该图片使用的网址的属性
4. 将图像添加到步骤1中容器内的DOM

这是the picturefill library使用的方法。

Answer 2

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

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

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

Answer 3

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

我可以添加的是，虽然没有src的img元素在技术上不符合规范，但省略它不会破坏您的代码，您将避免预加载。然后你可以使用<img data-src="" data-src2="">并使用JavaScript交换图像。 <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 atttribute并在JS中附加相应的文件名。

优化Retina显示的网站图像

4 个答案: