在 Retina 中显示良好的 HTML 图像图标答案

【问题标题】：Image icons in HTML that display nicely in Retina displays在 Retina 中显示良好的 HTML 图像图标
【发布时间】：2012-11-12 19:34:42
【问题描述】：

我希望在我的 HTML 中拥有漂亮的图像，这些图像在配备 Retina 显示器的计算机的浏览器上显示得非常好。我猜我只需要在我的img 标签中有一个高分辨率图像。但是，分辨率较低的浏览器都必须下载这个更大的文件，然后对其进行缩小，这可能会导致图像质量低于我在 Photoshop 等工具中缩小图像的质量。

我希望我能做这样的事情：

<img src="/example.png" src-retina="/example-high-res.png"/>

显示 2 个不同图像的正确方法是什么，1 个用于正常显示，1 个用于视网膜显示？

【问题讨论】：

您可能必须使用 JavaScript 或 PHP 从用户代理检测设备。那么如果是retina设备，则显示img，带有width和height属性和更高分辨率的图像，如果不是retina设备，则显示正常图像。
如果您关心的是图标图像，您可能应该使用精灵图。使用 SVG spritemaps 可能值得研究：它们可以很好地放大/缩小。支持相当不错，您始终可以提供 png 后备。

标签： html css retina-display

【解决方案1】：

与CSS it's easy

使用图像源属性，执行此操作的标准方法较少。我自己使用了一种基于 JS 的方法来检查 window.devicePixelRatio:

<img id="example-img" width="100" height="100"/>
<script>
  if (window.devicePixelRatio > 1) {
    $('#example-img').src = "/example-high-res.png";
  } else {
    $('#example-img').src = "/example.png";
  }
</script>

但如果可以，请使用 CSS 和媒体查询。干净多了。

【讨论】：

【解决方案2】：

有几种不同的方法，它们都有优点和缺点。苹果自己实际上同时为视网膜设备提供视网膜和标准图像，这很有效，但显然会导致下载量很大。

如果您想要半自动化的东西，请尝试Retina.js。来自描述：

当您的用户加载页面时，retina.js 会检查页面上的每个图像看看您的手机上是否有该图像的高分辨率版本服务器。如果存在高分辨率变体，脚本将换入该图像就地。

脚本假定您使用 Apple 规定的高分辨率修饰符 (@2x) 表示服务器上的高分辨率图像变体。

【讨论】：

【解决方案3】：

您需要制作两个（或可能更多）CSS 文件，并在 JS 的帮助下根据用户的浏览器设置使用它们。移动网站的 css 文件应制作在手机中完全可见的新布局。

查看this SO Question 以更好地理解该主题。

【讨论】：

【解决方案4】：

使用响应式设计原则根据设备屏幕分辨率放大或缩小图像尺寸。

在 CSS 中，您可以定义目标设备的 max-width 和 max-height。这就是你在 CSS 中声明它的方式：

@media only and (max-device-width:1024px) and (orientation:portrait)

之后，您必须以百分比指定元素的宽度和高度，相对于父元素。这是可行的方法，但在移动设备上的带宽消耗方面并不是最好的方法，因为即使我们将百分比设置得较低，图像也会以其原始大小上传，并且在浏览器解析 CSS 文档后完成缩小。

W3C 提出了一些关于不同设备应如何处理图像的条款，但没有一个被普遍接受和标准化。

最受好评的提议之一是新的<image> 和<source> 标签，它们接受不同的图像源并根据屏幕分辨率使用最合适的图像尺寸。

<picture alt="">

  <!-- low-res, default -->
  <source src="small.jpg">

  <!-- med-res -->
  <source src="medium.jpg" media="(min-width: 400px)">

  <!-- high-res -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback content -->
  <img src="small.jpg" alt="description of image">

</picture>

有一个 polyfill 可以模仿提议的图片元素：https://github.com/scottjehl/picturefill

这里有两篇关于这个概念的彻底解释的文章：

http://nicolasgallagher.com/responsive-images-using-css3/

http://css-tricks.com/on-responsive-images/

【讨论】：

【解决方案5】：

您可以使用带有 css 背景定义的 div 来指定图像。当客户端是具有“retina-display”的 Apple 设备时，您可以使用 css 媒体查询选择正确的 css 定义。

【讨论】：

【解决方案6】：

你可以用 jQuery 做到这一点：

HTML：

<img src="/example.png" src-retina="/example-high-res.png"/>

Javascript：

  if (window.devicePixelRatio > 1) {
    $('img').each(function() {
      var src_retina = $(this).attr("src-retina");
      $(this).attr("src", src_retina);
    });
  }

这个演示展示了它的工作方式：http://jsfiddle.net/TLz7S/。

注意：我可能检测到视网膜显示错误；我其实没有。如果有人发现不正确，请告诉我。

【讨论】：