HTML格式的图像图标在视网膜显示器中显示良好

我希望在我的HTML中有漂亮的图像，在带有视网膜显示器的计算机的浏览器上显示得非常好。我猜我只需要在我的

img

标签中有一个高分辨率图像。但是，分辨率较低的浏览器都必须下载这个较大的文件，然后对其进行缩小，这可能会导致图像质量低于我使用photoshop之类的工具缩小图像的质量

我希望我能做点像这样的事：

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

显示两个不同图像的正确方式是什么，一个用于正常显示，一个用于视网膜显示？

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

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

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

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

有了图像源属性，就没有那么多标准的方法了。我自己使用了一种基于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和媒体查询。它干净多了。

有了图像源属性，就没有那么多标准的方法了。我自己使用了一种基于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和媒体查询。它要干净得多。

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

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

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

在CSS中，您可以定义目标设备的

最大宽度

和

最大高度

。这是您在CSS中声明它的方式：

@仅限媒体和（最大设备宽度：1024px）和（方向：纵向）

之后，必须以百分比形式指定相对于父元素的元素宽度和高度。这是一种工作方法，但就移动设备的带宽消耗而言，这并不是最好的方法，因为即使我们将百分比设置得更低，图像也会以其本机大小上传，并且在浏览器解析CSS文档后进行缩小

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

最受欢迎的方案之一是新的

和

标签，它们接受不同的图像源，并根据屏幕分辨率使用最合适的图像尺寸

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

有一个模拟拟用图片元素的多边形填充：

以下是关于该概念的两篇详细解释的文章：

---

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

在CSS中，您可以定义目标设备的

最大宽度

和

最大高度

。这是您在CSS中声明它的方式：

@仅限媒体和（最大设备宽度：1024px）和（方向：纵向）

之后，必须以百分比形式指定相对于父元素的元素宽度和高度。这是一种工作方法，但就移动设备的带宽消耗而言，这并不是最好的方法，因为即使我们将百分比设置得更低，图像也会以其本机大小上传，并且在浏览器解析CSS文档后进行缩小

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

最受欢迎的方案之一是新的

和

标签，它们接受不同的图像源，并根据屏幕分辨率使用最合适的图像尺寸

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

有一个模拟拟用图片元素的多边形填充：

以下是关于该概念的两篇详细解释的文章：

---

有几种不同的方法，它们既有优点也有缺点。事实上，苹果公司自己也为视网膜设备提供视网膜和标准图像，虽然可以正常工作，但显然下载量相当大

如果你想要半自动化的东西，试试看。根据描述：

当用户加载页面时，retina.js会检查页面上的每个图像 查看您的屏幕上是否有该图像的高分辨率版本 服务器。如果存在高分辨率变体，则脚本将进行交换 这一形象已经到位

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

---

有几种不同的方法，它们有优点和缺点。事实上，苹果公司自己也为视网膜设备提供视网膜和标准图像，虽然可以正常工作，但显然下载量相当大

如果你想要半自动化的东西，试试看。根据描述：

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