网站的自动视网膜图像
有了新的苹果MacBook Pro与视网膜显示，如果您提供一个“标准”的形象在您的网站，它会有点模糊。 所以你必须提供一个视网膜图像。
有没有办法自动切换到@2x图像，像iOS（与Objective-C）呢？ 我发现的是： 在移动设备和视网膜显示器上的高分辨率图像的CSS ，但我希望我能find一个自动处理所有的图像， 没有CSS或JavaScript 。
可能吗？
UPDATE
我会强调@Paul D. Waitebuild议的这篇有趣的文章 ，以及塞巴斯蒂安关于它的一个有趣的讨论 。
img标签有一个新属性，允许您添加视网膜src属性，即srcset。 没有JavaScript或CSS需要，没有双重加载的图像。
<img src="low-res.jpg" srcset="high-res.jpg 2x">
浏览器支持： http ： //caniuse.com/#search=srcset
其他资源：
- WebKit发布post
- W3C文档 srcset
- 很好的解释为什么以及如何使用srcset
- 克里斯Coyer的职位更好的信息
有不同的解决scheme，每个解决scheme都有自己的优点和缺点。 哪一个最适合你，取决于各种因素，比如你的网站是如何devise的，你的典型的访问者使用什么样的技术等。注意，视网膜显示不限于Macbook Pro Retina和即将上市的iMac，还包括移动设备，可能有自己的需求。
一般来说，这个问题也与响应式devise中的图像密切相关。 事实上，最好使用通用响应devise技术，而不是针对特定设备进行devise。 毕竟，技术将来也会一直在变化。
我注意到的一些解决scheme/讨论：
- 向量尽可能包括CSS技术（渐变，圆angular等），SVG和图标字体。
- 正如Yoav Weiss所build议的，为高分辨率（“视网膜”）图像提供高分辨率（JPEG质量）压缩，或者让移动networking在真正需要（即移动时）时对其进行压缩，正如Paul Boag所build议的那样。
- 自适应图像 ，一个（主要）服务器端解决scheme。 它基于存储屏幕分辨率的cookie，configuration为从PHP脚本提供图像的Web服务器，以及用于读取cookie并提供相应图像的命名脚本。
- 一堆的可能性在Smashing杂志上有很好的描述和讨论。
- 正如Paul Boag的一段video中所提出的那样，稍微提高分辨率以使视网膜画面变得平滑一些。
- A List Apart上的@ 1.5x技术基本上是一样的想法。
- 在不久的将来，
<picture>标签可能会成为W3C工作组甚至Apple支持的解决scheme。 - Jake Archebald提出的JavaScript技术 。
- 关于Smashing杂志的不同技术和一般问题的广泛讨论 。
正如其他答案所显示的，还有更多的技术 – 但可能并不是最佳实践。
我想知道的一件事是如何testing和debugging这些技术中的一些，而不具有相应的设备（s）可用…
这里是我用来实现背景图像的混合less。 如果您使用的是dotLess，retina.js不适用于背景图像，因为它需要自己的mixin，它本身使用dotLess中不支持的脚本评估。
所有这一切的诀窍是获得IE8的支持。 它不容易做背景大小，所以基本情况（非移动媒体查询）必须是一个简单的，非缩放的图标。 媒体查询然后处理视网膜的情况，并可以自由使用背景大小的类，因为视网膜永远不会在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文件是视网膜的两倍分辨率。
因为没有人提到这个问题，所以我会把它放在那里：只要有可能，就使用SVG。 他们毫不费力地出现在美丽的视网膜决议。
支持IE8是恐龙的主要恐龙。 Gzip文件大小通常比位图（png / jpg）格式好，图像更灵活; 您可以在不同的分辨率下重新使用它们，并在必要时进行重新设置，从而节省开发时间和下载带宽。
只需将视网膜图像提供给每个人，并将图像压缩到图像元素内的原始大小的一半。 比方说，你的图像是400px宽和高 – 只需指定图像宽度为200px ，使其看起来像这样：
<img src="img.jpg" width="200px" height="200px" />
如果您的图片是照片，则可以在其上增加JPG压缩而不会使其看起来更糟糕，因为当以2x显示图片时，JPG压缩工件可能不会显示：请参阅http://blog.netvlies.nl /deviseinteractie /视网膜转/
如果它的背景图像是一个简单的方法来做到这一点：
#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 。
下面是苹果（ 这里 ）提供的一个例子 ：
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
我的代码片段就是这样做的。 不需要jQuery，只需使用data-hdimg属性即可。
https://github.com/ajkochanowicz/High-Res-Images
document.addEventListener 'DOMContentLoaded', -> HDimgs = document.querySelectorAll '[data-hdimg]' ( image = new Image() image.onload = -> console.info 'Image loaded' img.src = image.src img.style.width = "#{image.width / 2}px" img.removeAttribute 'data-hdimg' image.onerror = -> console.error 'Could not load image' image.src = img.dataset.hdimg ) for img in HDimgs
这个问题对响应式网站来说尤其棘手，因为浏览器的大小和图像的宽度可能有所不同。 另外当处理一个CMS，其中多个编辑器可能会上传1000张图像时，对我来说，要求用户上传特别压缩的图像似乎是不切实际的。
所以我写了一个脚本，考虑到这一点，它触发在页面的底部和resize完成。 每次考虑像素密度和图像占用的大小。
如果你不害怕使用java脚本，那么这里是一个很好的文章http://www.highrobotics.com/articles/web/ready-for-retina.aspx 。 它有非常简单的解决scheme。
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'); }); });
