网站的自动Retina图像

使用带有视网膜显示屏的新型Apple MacBook Pro，如果您在网站上提供“标准”图像，将会有些模糊。因此，您必须提供视网膜图像。

有没有办法@2x像iOS（使用Objective-C）那样自动切换到图像？我发现的是：用于移动和视网膜显示器上的高分辨率图像的CSS，但是我希望我可以找到所有图像的自动处理过程，而无需CSS或JavaScript。

可能吗？

更新
我会强调@Paul D. Waite推荐的这篇有趣的文章，以及由Sebastian链接的有趣的讨论。

img标签有一个新属性，允许您添加视网膜src属性，即srcset。无需JavaScript或CSS，无需重复加载图片。

<img src="low-res.jpg" srcset="high-res.jpg 2x">

浏览器支持：http : //caniuse.com/#search=srcset

其他资源：

• WebKit发布帖子
• srcset的W3C文档
• 关于为什么以及如何使用srcset的很好的解释
• 克里斯·科耶（Chris Coyer）的帖子，以获取更多信息

有不同的解决方案，每种解决方案各有优缺点。哪一种最适合您取决于各种因素，例如网站的设计方式，典型访问者使用的技术等。请注意，视网膜显示器不仅限于Macbook Pro Retina和即将上市的iMac，还包括移动设备，可能会有自己的需求。

通常，该问题还与响应式设计中的图像密切相关。实际上，最好是使用通用的响应式设计技术，而不是针对特定设备进行设计。毕竟，技术在将来也会一直在变化。

我注意到的一些解决方案/讨论：

• 可能的矢量包括CSS技术（渐变，圆角等），SVG和图标字体。
• 如Yoav Weiss所建议的那样，提供高分辨率（“视网膜”）图像，但对其进行更多压缩（JPEG质量），或者如Paul Boag所建议，让移动网络在真正需要时（即，当移动时）对其进行压缩。
• Adaptive Images，（主要是）服务器端解决方案。它基于存储屏幕分辨率的cookie，配置为从PHP脚本提供图像的Web服务器以及命名脚本以读取cookie并提供适当的图像。
• 在《Smashing Magazine》中充分描述和讨论了许多可能性。
• 正如Paul Boag的视频中所建议的那样，可以提供稍高的分辨率以使视网膜的轮廓稍微平滑一些。
• A List Apart上的@ 1.5x技术基本上是相同的想法。
• 在不久的将来，该<picture>标签可能会成为W3C工作组甚至Apple 支持的解决方案。
• 一个JavaScript的技术提出杰克Archebald。
• 一个广泛的讨论对不同的技术碎杂志和一般的问题。

正如其他答案所示，还有更多的技术-但可能还没有最佳实践。

我想知道的一件事是如何在没有相应设备可用的情况下测试和调试其中一些技术...

由于还没有人提到明显的东西，因此我将其浮出水面：如果可能的话，只需使用SVG。它们毫不费力地以美丽的视网膜分辨率出现。

IE8是值得担心的主要恐龙，因此对它的支持很好。压缩文件的大小通常比位图（png / jpg）格式更好，并且图像更灵活；您可以以不同的分辨率重用它们，并在必要时重新设置它们的样式，从而节省了开发时间和下载带宽。

这是我用于实现背景图像的较少mixin。如果您使用dotLess，则retina.js不适用于背景图像，因为retina.js需要其自己的mixin，而mixin本身使用的脚本评估是dotLess不支持的。

所有这些技巧都在于获得IE8支持。它无法轻松进行背景大小调整，因此基本情况（非移动媒体查询）必须是一个简单的，非缩放的图标。然后，媒体查询会处理视网膜的情况，并且可以自由使用background-size类，因为视网膜永远不会在IE8上使用。

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

用法样本：

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

这要求您有两个文件：

• start_grey-97_12.png
• start_grey-97_12@2x.png

其中2x文件是视网膜的双分辨率。

只需向所有人提供视网膜图像，然后将图像压缩到图像元素内原始大小的一半即可。假设您的图片400px又宽又高-只需指定图片宽度200px即可使其看起来像这样清晰：

<img src="img.jpg" width="200px" height="200px" />

如果您的图像是照相的，则可以增加其上的JPG压缩而不会使它看起来更糟，因为当在以下位置显示图像时，JPG压缩伪像可能不会显示2x：请参阅http://blog.netvlies.nl/设计互动/视网膜革命/

如果其背景图片是实现此目的的简单方法是：

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url(image@2x.png); background-size: 50%; }
}

另一种简单的方法是使用此方法：

只需替换：

<img src="image.jpg" alt="" width="200" height="100" />

与

<img src="image@2x.jpg" alt="" width="200" height="100" />

我发现了一种提供多分辨率图像的有趣方法。
它实际上使用了CSS，这是我想要避免的事情，并且只能在Safari和Chrome中使用。
我在说image-set。

这是由Apple（此处）提供的示例：

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

我也想分享以下两个链接：

• Safari 6和Chrome 21添加了图像集以支持视网膜图像
• 该image-set()符号@ W3C

使用JSF，您可以创建一个自定义的Facelets标记，以节省必须添加srcset到每个图像的麻烦。

在你的taglib.xml，你可以有这样的：

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

您的标签可能类似于：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

可以这样使用：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="image@2x.jpg"/>
</html>

并将呈现：

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>

对于响应站点，此问题尤其棘手，响应站点的图像宽度可能取决于浏览器的大小。同样，当处理多个编辑者可能要上载1000张图像的CMS时，让我上载人们特别压缩的图像对我来说似乎也不现实。

因此，我编写了一个考虑到这一点的脚本，该脚本在页面底部和调整大小后触发。每次都要考虑像素密度和图像占用的大小。

http://caracaldigital.com/retina-handling-code/

如果您不因担心使用Java脚本而感到沮丧，那么这里有一篇不错的文章http://www.highrobotics.com/articles/web/ready-for-retina.aspx。它有非常简单的解决方案。

JSFiddle中的示例值一千个单词。

使用：

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

JS：

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});