在《探索Web上图片使用方式》一文中介绍了Web上图片的各种使用方式，从引入图片、图片效果处理、图片适配、图片加载以及图片优化几个方面介绍Web的图片使用方式。其中有一个值得我们去探讨的话题，那就是如何根据用户的设备为其提供正确的图片。那在这篇文章中我们就一起来聊聊这方面的技术。

提供正确图像的优势

随着科技的进一步发展，现在Web的展示不仅仅是在PC电脑上了，它需要面对更多的媒体终端，手机、电视以及其他智能屏幕等。而图像又是Web页面或Web程序必不可少的媒体元素之一。如果我们根据不同的终端设备能提供不同的图像，那会让我们在处理图像上省事情的多。

按照以前的方式，为所有终端提供的都是一张图片，所以我们面对这么多种不同的设备和屏幕，我们都要削尖了脑袋去想办法，怎么让图片能适合屏幕，而且还不失伪合度。面对这样的一个场景，社区很多人都在探讨响应式图像的处理方式。在W3cplus上也有不少这方面的文章，感兴趣的不仿了解一下。

而我们今天要探讨的是后一种方式。可以根据不同的终端加载不同的图像。这也意味着不需要依赖浏览器调整大小来在不同的屏幕上显示图像，也不需要将高分辨率的图像运用在低分辨率的设备上，这样做会浪费用户巨大的带宽。毕竟，一个320px的屏幕上不需要一个1920px的图像，即使是三倍的屏幕。

除此之外，这种方式其主要优势主要有：

• 加载适当大小图像的文件，可以让带宽得到更充分的利用
• 加载不同裁剪并具有不同纵横比的图像可以更好的适合不同宽度布局的变化
• 加载更高的像素密图像，让图像可以显示的更为清晰

提供正确图的姿势

如果做过响应式设计的同学，难免会涉及到处理响应式图像，但处理响应式图像时，有很多问题需要解决。只不过在这篇文章中我们不再探讨这方面的问题，如果想把这个事情聊彻底，估计都可以写本书了。我们还是回到今天的主题上来：给你的用户提供正确的图像！

简单地说，可以通过以下两种方式达到我们的诉求：

• 使用<img>元素加载图像，使用该元素最新属性srcset和size给用户加载正确的图像
• 使用<picture>元素给用户加载正确的图像

看上去好像很简单一样，其实不然，这里面有很多概念需要理解。接下来我尝试着向大家介绍些。

物理像素 和 逻辑像素

物理像素（Physical pixels）又被称为设备像素。设备能控制显示的最小物理单位，显示器上一个个的点。大小固定，不可变。

众所周之，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。其中每一个像素又由一些红色，绿色和蓝色的 “潜在像素” 组成。我们的肉眼无法看到 “潜在像素”，因为三个颜色被混合为一个单一 像素的颜色并呈现给我们，但是这些内容并不和程序员直接相关。下面两张图也许有助于你对像素有一个本质的认识：

逻辑像素（Logical pixels）又被称为设备独立像素或密度无关像素。可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（比如CSS像素），这个点是没有固定的，越小越清晰，然后由相关系统转换为物理像素。

我们可以把逻辑像素看成数据世界的像素，也可以说成一个电子图片的最小可寻址单元。比如我们平时常说的100px * 100px图像时，这里的像素指的就是逻辑像素。

需要注意的是，相对于物理像素而言逻辑像素没有固定的物理尺寸，也就是说除非我们指定显示条件，不然图像的物理尺寸是不确定的。

假设你有一台iPhone X的设备，其屏幕分辨率是1125px * 2436px。这意味着该设备的屏幕宽度是1125px，高度是2560px。

而在实际使用的时候，下面的CSS代码也能匹配到iPhone X设备：

@media only screen and (min-width: 375px) and (max-width: 767px) { 
    /* Your Styles... */ 
}

这究竟是为什么呢？不知道大家有没有想过这个问题？

虽然iPhone X设备的物理像素是1125px * 2436px，但如果浏览器试图使用每一个像素在5.8英寸的屏幕上显示内容，内容就会小得看不见。如果我们把逻辑像素的概念套进来，应该会更易于理解。

逻辑像素 = 物理像素 / 设备像素比(DPR)

设备像素比（DPR）是由设备制造商定义。简单地说，它指的是一个逻辑像素中包含的物理像素的数量：

设备像素比 = 物理像素 / 逻辑像素

DPR为2的设备意味着一个逻辑像素包含4（2 x 2