使用HiDPI/Retina图像降价

Question

如何使用Markdown生成的超文本标记语言在HiDPI显示器上显示图像，以便以高分辨率显示图像。通常，我会使用srcset属性创建<img>标签，或者在每个图像上适当地设置width和height，或者使用媒体查询。但是，Markdown图像的结果只允许alt属性。具体地说，我使用的是marked库(我对此没有控制权)。

我确实完全控制了CSS。在CSS中，有没有一种方法可以使所有图像的逻辑像素宽度至少为其物理像素宽度的1/3？这样我就可以要求Markdown中引用的所有图像都是3x。有这么简单吗？

img {
  width: 33.33%;
}

更好的方法是让浏览器根据设备的devicePixelRatio下载不同的图像。

使用HTML不是一种选择。marked与sanitize标志一起使用来转义任何HTML。我希望有一个CSS解决方案或者其他一些聪明的机制。

Answer 1

要通过Markdown实现这一点，只需使用原始HTML。rules状态(添加粗体)：

HTML不是

的替代品，甚至不能接近HTML。它的语法非常小，只对应于HTML标记的很小的子集。这个想法并不是要创建一种使插入HTML标记更容易的语法。在我看来，HTML标签已经很容易插入了。Markdown的想法是让阅读、写作和编辑散文变得容易。HTML是一种发布格式；Markdown是一种书写格式。因此，Markdown的格式化语法只解决了可以在纯文本中传达的问题。

对于Markdown语法中没有涉及的任何标记，您只需使用本身。不需要在它前面加上前缀或分隔它来表明您正在从Markdown切换到HTML.您只需使用标签。

因此，将<img>标记与srcset属性和/或width和height一起使用，就像在HTML中一样。Markdown将按原样传递它们。

Answer 2

我能够处理来自Markdown的HiDPI图像的一种方法是利用title属性。图像标题可以在语义上有意义，并向CSS提供信息，以便使用attribute selectors有效地调整图像大小。

作为示例，我可以创建一个Markdown图像，如下所示：

![](http://images.ucode.com/logo_1200.png "Important example")

然后我可以使用属性选择器将宽度从1200px设置到400px，这使得它对于devicePixelRatio为3的设备非常清晰：

img[title~="important" i][title~="example" i] {
  width: 400px;
}

这意味着对于所有重要的例子来说，逻辑宽度都应该是400像素。如果我给它一个1200像素的图像，标准的DPI设备会有一个较慢的图像下载速度，但在其他情况下会很好。

理想情况下，有一个解决方案，我可以为不同的devicePixelRatio提供多个图像。然而，这至少目前已经足够好了。

Answer 3

您可以考虑设备宽度和设备像素比率。所以我们可以解决这个问题。

/* Large Monitors devices (large desktops, 1920px and up)*/
@media only screen and (max-width: 1920px) {

  .logo {
    width: 160px;
    height: 109px;
    background-image: url("/img/1920px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo {
      width: 160px;
      height: 109px;
      background-image: url("/img/1920px/logo/logo-2x.png");
    }

  }

}

/* Extra large devic
es (large desktops, 1280px and up)*/
@media only screen and (max-width: 1280px) {

  .logo {
    width: 120px;
    height: 82px;
    background-image: url("/img/1280px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/1280px/logo/logo-2x.png");
    }

  }
}

/* Large devices (desktops, 960px and up)*/
@media only screen and (max-width: 960px) {

  .logo{
    width: 100px;
    height: 68px;
    background-image: url("/img/960px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/960px/logo/logo-2x.png");
    }

  }

}

/* Medium devices (tablets, 640px and up)*/
@media only screen and (max-width: 640px) {

  .logo{
    width: 78px;
    height: 42px;
    background-image: url("/img/640px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/640px/logo/logo-2x.png");
    }

  }
}


/* Small devices (landscape phones, 320px and up)*/
@media only screen and (max-width: 320px) {

  .logo{
    width: 78px;
    height: 42px;
    background-image: url("/img/320px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/320px/logo/logo-2x.png");
    }

  }
}