自动Retina图像的网站

时间:2012-12-06 13:22:45

标签: html image retina-display

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

有没有办法自动切换到@2x图像,如iOS(使用Objective-C)吗?我发现的是:CSS for high-resolution images on mobile and retina displays,但我希望我能找到所有图片的自动流程,没有CSS或JavaScript

有可能吗?

更新
我要强调article建议的这个有趣@Paul D. Waitediscussion关联的有趣Sebastian

11 个答案:

答案 0 :(得分:133)

img标签有一个新属性,允许您添加视网膜src属性,即srcset。 不需要javascript或CSS,也不需要双重加载图片。

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

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

其他资源:

答案 1 :(得分:14)

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

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

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

  • 尽可能包含CSS技术(渐变,圆角等),SVG和图标字体。
  • 提供高分辨率(“视网膜”)图像,但按照 Yoav Weiss 的建议压缩它们(JPEG质量),或让移动网络在真正需要时压缩它们(即移动时),如 Paul Boag
  • 所示
  • Adaptive Images ,(主要)服务器端解决方案。它基于存储屏幕分辨率的cookie,配置为从PHP脚本提供图像的Web服务器,以及用于读取cookie并提供适当图像的命名脚本。
  • A bunch of possibilities Smashing Magazine 上进行了详细描述和讨论。
  • 提供略高的分辨率,以平滑视网膜的描绘,如 Paul Boag 的视频所示。
  • The @1.5x technique A List Apart 基本上是一样的想法。
  • 在不久的将来,<picture> tag可能会成为 W3C working group 甚至Apple支持的解决方案。
  • Jake Archebald 提出的JavaScript technique
  • Smashing Magazine extensive discussion不同技巧以及一般问题。

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

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

答案 2 :(得分:10)

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

答案 3 :(得分:9)

由于没有人提到明显的,我会把它浮出去:在可能的情况下,只使用SVG。他们毫不费力地出现在美丽的视网膜分辨率上。

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

答案 4 :(得分:6)

只需向每个人提供视网膜图像,并将图像压缩到图像元素内的原始尺寸的一半。就像让我们说你的图像宽{{}}}一样 - 只需将图像宽度指定为400px,使其看起来像这样清晰:

200px

如果你的图像是照片,你可以增加它的JPG压缩而不会让它看起来更糟,因为当<img src="img.jpg" width="200px" height="200px" /> 显示图像时,JPG压缩工件可能不可见:见{{ 3}}

答案 5 :(得分:1)

如果背景图片的简单方法是:

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

答案 6 :(得分:1)

我找到了提供多种分辨率图像的有趣方法 它实际上使用CSS,我想避免使用CSS,仅适用于Safari和Chrome 我在谈论image-set

以下是Apple(here)提供的示例

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 */
}

我想分享这两个链接:

答案 7 :(得分:1)

如果您不担心使用java脚本,那么这里有一篇好文章http://www.highrobotics.com/articles/web/ready-for-retina.aspx。它有非常简单的解决方案。

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

答案 8 :(得分:1)

我的代码片段就是这样做的。不需要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

答案 9 :(得分:1)

使用JSF,您可以创建一个custom Facelets tag,以节省将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"/>

答案 10 :(得分:0)

这个问题对于响应式网站来说尤其棘手,其中和图片的宽度可能会根据浏览器的大小而变化。此外,在处理多个编辑可能上传1000张图像的CMS时,我要求人们上传特别压缩的图像对我来说似乎不切实际。

所以我写了一个脚本,考虑到这一点,它在页面底部和调整大小完成时触发。每次考虑像素密度和图像占用的大小。

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