为网站自动视网膜图像-AutomaticRetinaimagesforwebsites

112  

There is a new attribute for the img tag that allows you to add a retina src attribute, namely srcset. No Javascript or CSS needed, no double loading of images.

img标签有一个新属性，允许您添加retina src属性，即srcset。不需要Javascript或CSS，不需要重复加载图像。

Browser Support: http://caniuse.com/#search=srcset

浏览器支持:http://caniuse.com/搜索= srcset

Other Resources:

其他资源:

• WebKit release post
• WebKit版本发布
• W3C documentation for srcset
• W3C文档srcset
• good explanation about why and how to use srcset
• 关于为什么和如何使用srcset的很好的解释。
• Chris Coyer's post for more good info
• Chris Coyer的文章提供了更多的信息

14  

There are different solutions, each with its own pros and cons. Which one is best for you depends on various factors, such as how your website is designed, what kind of technology your typical visitors are using etc. Note that retina displays are not limited to the Macbook Pro Retina and the coming iMacs, but also include mobile devices, which may have their own needs.

有不同的解决方案,每个都有自己的优点和缺点。哪一个最适合你取决于各种各样的因素,比如你的网站设计,典型的游客正在使用什么样的技术等等。注意,视网膜显示视网膜并不仅限于Macbook Pro和未来的imac,但也包括移动设备,这可能有他们自己的需求。

The problem is also closely related to images in responsive designs in general. In fact, it is probably best to utilize generic responsive design techniques, instead of designing for specific devices. After all, technology will keep changing all the time in the future, too.

这个问题也与一般的反应性设计中的图像密切相关。事实上，最好是利用通用的响应性设计技术，而不是为特定的设备设计。毕竟，技术在未来也会不断变化。

Some of the solutions/discussions I noted:

我注意到的一些解决办法/讨论:

• Vectors wherever possible including CSS techniques (gradients, rounded corners etc.), SVG and icon fonts.
• 向量尽可能包括CSS技术(渐变、圆角等)、SVG和图标字体。
• Serving high resolution ("retina") images, but compress them more (JPEG quality), as suggested by Yoav Weiss, or let the mobile networks compress them when really needed (i.e. when mobile), as suggested by Paul Boag.
• 提供高分辨率(“视网膜”)图像，但是像Yoav Weiss建议的那样压缩它们(JPEG质量)，或者让移动网络在真正需要时(比如移动时)压缩它们，正如Paul Boag所建议的那样。
• Adaptive Images, a (mostly) server side solution. It is based on a COOKIE storing the screen resolution, a web server configured to serve images from a PHP script, and named script to read the COOKIE and serve the appropriate image.
• 自适应图像，一个(主要)服务器端解决方案。它基于一个存储屏幕分辨率的COOKIE，一个配置为从PHP脚本中提供图像的web服务器，以及读取COOKIE并提供适当图像的命名脚本。
• A bunch of possibilities well described and discussed on Smashing Magazine.
• 《Smashing》杂志很好地描述和讨论了一系列可能性。
• Serving just slightly higher resolutions to smooth retina portrayal a little, as suggested in a video by Paul Boag.
• 就像Paul Boag在一段视频中建议的那样，用稍微高一些的分辨率来描绘视网膜的图像。
• The @1.5x technique on A List Apart is basically the same idea.
• 清单上的@1.5x技术基本上是相同的。
• In the near future, the tag may become a solution supported by a W3C working group and even Apple.
• 在不久的将来， 标记可能成为W3C工作组甚至苹果支持的解决方案。
• A Javascript technique proposed by Jake Archebald.
• Jake Archebald提出的一种Javascript技术。
• An extensive discussion of different techniques on Smashing Magazine and the problem in general.
• 对粉碎杂志的不同技术和一般问题进行了广泛的讨论。

As the other answers show, there are even more techniques - but probably no best practice, yet.

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

One thing I wonder is how to test and debug some of these techniques, without having the respective device(s) available...

我想知道的是，如何在没有相应设备可用的情况下测试和调试这些技术。

10  

Here is the less mixin I use to achieve this for background images. retina.js doesn't work for background images if you are using dotLess, since it requires its own mixin which itself uses script evaluation which isn't supported in dotLess.

这里是我用于实现背景图像的较少的混合。视网膜。如果您正在使用dotLess，那么js不支持背景图像，因为它需要自己的mixin来使用dotLess不支持的脚本求值。

The trick with all of this is to get IE8 support. It can't easily do background-size so the base case (non mobile media query) has to be a simple, non-scaled icon. The media query then handles the case of retina and is free to use the background-size class since retina will never be used on IE8.

所有这些的诀窍在于获得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;
         }
}

Usage sample:

使用示例:

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

Ths requires you to have two files:

Ths要求你有两个文件:

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

Where the 2x file is double resolution for retina.

这里的2x文件是视网膜的双分辨率。

9  

Since no one's mentioned the obvious yet, I'll float it out there: where possible, just use SVG. They appear at beautiful retina resolutions with no effort whatsoever.

由于还没有人提到这一点，所以我将它放在那里:尽可能使用SVG。它们出现在漂亮的视网膜分辨率上，毫不费力。

Support for it is good with IE8 being the main dinosaur to worry about. Gzipped file sizes are often better than bitmapped (png/jpg) formats and the images are more flexible; you can reuse them at different resolutions and restyle them if necessary, which saves both development time and download bandwidth.

对它的支持很好，IE8是主要的恐龙。压缩文件大小通常比位图(png/jpg)格式好，图像更灵活;您可以在不同的分辨率下重用它们，并在必要时重新设计它们的样式，这既节省了开发时间，也节省了下载带宽。

6  

Just provide retina images to everyone, and squeeze the image to half its native size inside the image element. Like let's say your image is 400px wide and tall - just specify the image width as 200px to make it look sharp like this:

只需向每个人提供视网膜图像，并将图像压缩到图像元素内原有大小的一半。假设你的图片宽400px，高400px——只要将图片宽度指定为200px，让它看起来像这样:

If your image is photographic, you can probably increase the JPG compression on it without making it look worse, because the JPG compression artifacts probably won't be visible when the image is displayed at 2x: see http://blog.netvlies.nl/design-interactie/retina-revolution/

如果您的图像是照相的，那么您可以增加对它的JPG压缩，而不会使它看起来更糟，因为当图像显示为2x时，JPG压缩构件很可能是不可见的:请参见http://blog.netvlies.nl/design- revolution -interactie/retina- /

1  

if its background images a simple way to do this is:

如果它的背景图像有一个简单的方法，那就是:

    #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%; }
}

another simple way is to use this method:

另一种简单的方法是使用这种方法:

Just replace:

只是替换:

with

与

1  

I've found this interesting way for providing multiple resolution images.
It actually uses CSS, something I wanted to avoid, and works in Safari and Chrome only.
I'm talking about image-set.

我发现了提供多分辨率图像的有趣方式。它实际上使用了CSS，这是我想避免的，并且只在Safari和Chrome中使用。我说的是图像集。

Here's an example, provided by Apple (here):

苹果(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 */
}

I wanna share also these two links:

我也想分享这两个链接:

• Safari 6 and Chrome 21 add image-set to support retina images
• Safari 6和Chrome 21增加了支持视网膜图像的图像集
• The image-set() notation @W3C
• 图像集()符号@W3C

1  

If you are not frustrated by fear of using java-script then here is a good article http://www.highrobotics.com/articles/web/ready-for-retina.aspx. It has very simple solution.

如果你没有因为害怕使用java脚本而感到沮丧，那么这里有一篇很好的文章:http://www.highrobotics.com/articles/web/press/a.aspx。它有很简单的解。

And the example in JSFiddle is worth a thousand words.

而JSFiddle的例子价值千言万语。

Using:

使用:

JS:

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');            
    });
});

1  

My code snippet does just this. No jQuery required, just use the data-hdimg attribute.

我的代码片段就是这样做的。不需要jQuery，只需使用data-hdimg属性。

https://github.com/ajkochanowicz/High-Res-Images

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

0  

This problem is especially tricky with responsive sites where and image can be of varying width dependant on browser size. Also when dealing with a CMS where multiple editors are potentially uploading 1000s of images it to me seemed unrealistic for me to ask people to upload specially compressed images.

对于响应性网站来说，这个问题尤其棘手，因为这些网站和图片的宽度取决于浏览器的大小。同时，当处理一个可能有多个编辑器上传上千张图片的CMS时，我觉得让人们上传特别压缩的图片是不现实的。

So I wrote a script that takes this into account, it fires at the bottom of the page and on resize finish. Each time taking into account pixel density and the size the image is occupying.

因此，我编写了一个脚本，考虑到这一点，它在页面底部触发并在resize finish上启动。每次考虑像素密度和图像占用的大小。

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

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