自动Retina图像的网站

Question

使用具有视网膜显示屏的新款Apple MacBook Pro,如果您在网站上提供"标准"图像,则会有点模糊.所以你必须提供视网膜图像.

有没有办法自动切换到@2x图像,如iOS(使用Objective-C)吗？我发现的是:移动和视网膜显示器上的高分辨率图像的CSS,但我希望我能找到所有图像的自动过程,没有CSS或JavaScript.

可能吗？

更新
我会强调@Paul D. Waite提出的这篇有趣的文章以及塞巴斯蒂安关于它的有趣讨论.

Answer 1

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的帖子提供了更多信息

Answer 2

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

该问题一般也与响应式设计中的图像密切相关.事实上,最好使用通用的响应式设计技术,而不是针对特定设备进行设计.毕竟,技术在未来也将一直在不断变化.

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

• 尽可能包含CSS技术(渐变,圆角等),SVG和图标字体.
• 按照Yoav Weiss的建议,提供高分辨率("视网膜")图像,但压缩它们(JPEG质量),或让移动网络在真正需要时(即移动时)压缩它们,正如Paul Boag所建议的那样.
• 自适应图像,(主要)服务器端解决方案.它基于存储屏幕分辨率的cookie,配置为从PHP脚本提供图像的Web服务器,以及用于读取cookie并提供适当图像的命名脚本.
• Smashing Magazine上描述和讨论的一系列可能性.
• 正如保罗·博格(Paul Boag)在一段视频中所建议的那样,只需略微提高分辨率即可平滑视网膜的描绘.
• A List Apart上的@ 1.5x技术基本上是相同的想法.
• 在不久的将来,<picture>标签可能会成为W3C工作组甚至Apple 支持的解决方案.
• 一个JavaScript的技术提出杰克Archebald.
• 关于Smashing Magazine的不同技术和一般问题的广泛讨论.

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

我想知道的一件事是如何测试和调试其中的一些技术,而无需使用相应的设备......

Answer 3

既然没有人提到这个显而易见的东西,我会把它浮出去:在可能的情况下,只使用SVG.他们毫不费力地出现在美丽的视网膜分辨率上.

IE8是担心的主要恐龙,对它的支持是好的.Gzipped文件大小通常比位图(png/jpg)格式更好,图像更灵活; 您可以在不同的分辨率下重复使用它们,并在必要时重新设置它们,这样可以节省开发时间和下载带宽.

Answer 4

这是我用来实现背景图像的较少混合.如果使用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文件是视网膜双倍分辨率.

Answer 5

只需向每个人提供视网膜图像,并将图像压缩到图像元素内的原始尺寸的一半.就像让我们说你的图像400px宽而高 - 只需指定图像宽度,200px使它看起来像这样锐利:

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

如果你的图像是照片,你可以增加它的JPG压缩而不会让它看起来更糟,因为当图像显示在2x以下时,JPG压缩工件可能不会显示:请参阅http://blog.netvlies.nl/设计interactie /视网膜转/

Answer 6

如果其背景图像，一个简单的方法是：

    #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" />