113

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

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

可能吗？

更新
我要强调@Paul D. Waite建议的这篇有趣的文章以及Sebastian链接的关于它的有趣讨论。

4

10 回答 10

167

img 标签有一个新属性，允许您添加一个retina src 属性，即srcset。无需 javascript 或 CSS，无需双重加载图像。

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

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

其他资源：

于 2013-10-04T17:01:04.803 回答
14

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

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

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

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

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

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

于 2012-12-15T20:25:57.770 回答
12

由于还没有人提到明显的，我将它浮出水面：在可能的情况下，只使用 SVG。它们毫不费力地以美丽的视网膜分辨率出现。

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

于 2012-12-14T18:06:35.967 回答
9

这是我用来为背景图像实现此目的的较少 mixin。如果您使用的是 dotLess，retina.js 不适用于背景图像，因为它需要自己的 mixin，而该 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文件是视网膜的双分辨率。

于 2013-07-05T07:06:47.937 回答
7

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

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

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

于 2012-12-06T14:44:10.420 回答
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" />
于 2012-12-06T13:48:37.153 回答
1

我发现了这种提供多分辨率图像的有趣方式。
它实际上使用了 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 */
}

我还想分享这两个链接：

于 2013-07-05T08:36:25.263 回答
1

使用 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"/>
于 2020-03-13T16:28:44.847 回答
0

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.

And the example in JSFiddle is worth a thousand words.

Using:

<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');            
    });
});
于 2013-10-18T06:57:05.167 回答
0

这个问题对于响应式站点尤其棘手，其中图像的宽度可能取决于浏览器的大小。此外，在处理多个编辑可能上传 1000 张图像的 CMS 时，让我要求人们上传特别压缩的图像似乎是不切实际的。

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

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

于 2013-08-15T21:07:39.537 回答