谈谈web中多倍图

双倍图，甚至是三倍图是应付那些不按常规出牌的设备，如苹果等厂家。

第一次遇到这个概念应该是很久之前了，大概是17年吧，东家主要是TOB业务，对图片的要求不高，加上那个时候的我没啥追求，能吃饱饭就行，所以忽略了。

第二次遇到这个概念，是在一家中等规模的TOC公司，设计总是会给三种图：一倍、两倍、三倍图。我也不知道怎么选，于是掐头去尾选了2倍的，也一直没什么问题。

今天，一个同事提到了双倍图的等等，我觉得是时候了解一下背后的原理了。

为什么会有N倍图

其实早期是没有这个概念的，起源于苹果。

当我们写下这行代码：

div{
  width:200px;    
}

这里的200px是逻辑意义上的像素，浏览器会转化成相应的物理意义的真实像素点到一个div容器上。写在css代码里的像素称为逻辑像素，而最终绘制出来的像素点称为物理像素，二者的比例始终是1:1。

苹果最受欢迎的业务恐怕是手机了，相比PC和平板，手机的屏幕是比较小的，如何在有限的物理尺寸下让屏幕更加的炫彩夺目呢？

苹果想到了一招，增加单位面积内的像素数：即在屏幕尺寸不变的前提下增加可容纳的物理像素数。像素点越密集、图像的细节自然就越多，图像当然也就更清晰更绚丽。

我们熟悉的Mac-pro、iphoneXR的物理像素增加了一倍。

例如，一个100*100尺寸的图片Mac-pro下的真实像素是200*200，如果使用了实际像素为100*100的图像，相当于少了一半的图像细节，自然是比较模糊的。

因此，为了图像的清晰展示，需要制作相应的n倍图。

如何使用N倍图

搞清楚了为何有这个东西，我们还需要知道屏幕的物理像素与逻辑像素的比例，即：window.devicePixelRatio。

如果图片是基于img元素，你需要获取设备的比例后，给img设置相应的图片地址：

const pixelRatio = window.devicePixelRatio;
const imgEle = ...
if(pixelRatio === 3){
  imgEle.src = '3@.jpg'
}else if(pixelRatio === 2){
  imgEle.src = '2@.jpg'
}else{
  imgEle.src = '1@.jpg'
}

另外还有一种更高效的方式使用img的srcset属性,类似于设置了多个候选图片，然后浏览器会根据条件自动应用相应的图片，比如：

  <img src="/files/16797/clock-demo-200px.png"
       alt="Clock"
       srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x">

如果图片是背景图，可以通过媒体查询来覆盖：

/* 2倍图 */
@media screen and (-Webkit-min-device-pixel-ratio: 2){
    .bg-img{
        background-image:url(2@.jpg)
    }
}
/* 3倍图 */
@media screen and (-Webkit-min-device-pixel-ratio: 3){
    .bg-img{
        background-image:url(3@.jpg)
    }
}

当然除了上述的方式以外，你也可以通过一些第三方的库：retinajs来解决这个问题。

再如果你不想弄这些，公司也没有特别规范和要求，用我之前的做法，全部两倍图，舒服了开发，虽然浪费了用户的网络资源，也不失一个讨巧的主意。