Question

我想在我的HTML中拥有漂亮的图像，这些图像可以很好地显示在具有Retina显示屏的计算机中的浏览器上。我猜我只需要在img标签中添加高分辨率图像。但是较低分辨率的浏览器都必须下载这个更大的文件，然后缩小它，可能会导致图像质量低于我在Photoshop中缩小工具的尺寸。

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

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

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

Answer 1

CSS it's easy

使用图像源属性，执行此操作的标准方法较少。我自己检查window.devicePixelRatio：

使用了基于JS的方法

<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和媒体查询。它更清洁了。

Answer 2

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

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

Answer 3

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

在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/

Answer 4

有几种不同的方法，它们有好处和缺点。苹果本身实际上为视网膜设备提供视网膜和标准图像，这种设备有效，但显然导致相当大的下载量。

如果您想要半自动化的内容，请尝试Retina.js。从描述：

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

该脚本假定您使用Apple规定的高分辨率修改器   （@ 2x）表示服务器上的高分辨率图像变体。

Answer 5

您可以使用带有css背景定义的div来指定图像。使用css media-queries，当客户端是具有“视网膜显示”的Apple设备时，您可以选择正确的css定义。

Answer 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/。

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

HTML中的图像图标在Retina显示中很好地显示

6 个答案: