让我们来看一个典型的场景。一个典型的网站头部可能会有一张图片，头部下面可能会有一些内容的图片。头部图片很可能会横跨整个头部的宽度，而内容图片会适应某个内容区块的宽度，以下是个简单的例子：

这个网页在宽屏设备（例如笔记本电脑或台式机）上表现良好（你可以查看在线演示以及在 GitHub 上查看源代码）。我们不会在本课程中详细讨论它的 CSS，只说以下几个要点：

然而，如果你尝试在小屏幕设备上查看本页面，问题就会产生。下图中网页的头部看起来还可以，但它在移动设备上占据了过多的屏幕高度，在这个尺寸下，你很难看到第一张内容图片中的两个人脸。

一个改进的方法是，当网站在窄屏上观看时，显示一张只含重要细节的裁剪版本的图片，在像平板电脑这样的中等宽度的屏幕设备上显示时，显示另一张裁剪的图片。如果采用这种方式，你会需要为多种布局提供不同的裁剪图片，这种问题通常称为美术设计问题（art direction problem）。

此外，如果是在小屏手机屏幕上显示网页，那么没有必要在网页上嵌入这样大的图片。这样做会浪费流量；移动用户不希望浪费流量来下载为桌面用户准备的大图片，他们的设备只需下载小图片即可。反过来说，一张小的位图，如果它的显示尺寸大于原始尺寸，看起来就会有颗粒感（位图有固定数量的像素宽，固定数量的像素高，正如我们在矢量图中所学到的）。理想情况下，用户的 web 浏览器可以使用多种分辨率的图片。然后，浏览器就可以根据用户设备的屏幕尺寸来确定加载的最佳分辨率。这就是分辨率切换问题。

更复杂的是，有些设备的屏幕分辨率很高，需要比你想象中更大的图像才能很好地显示。这本质上是同一个问题，但背景略有不同。

你可能会认为矢量图形能解决这些问题，在某种程度上是这样的——它们文件大小很小，而且缩放自如，因此你应该尽可能地使用它们。然而，它们并不适合所有的图片类型，虽然在简单图形、图案、界面元素等方面较好，但如果是有大量的细节的图片（例如照片），创建矢量图像会非常复杂。像 JPEG 这样格式的位图会更适合类似上面例子中的图片。

web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至中期，人们仅仅可以通过笔记本电脑和台式机来浏览 web 页面，所以浏览器开发者和规范制定者甚至没有想到要实现这种解决方式（响应式开发）。最近应用的响应式图片技术，通过为浏览器提供多个图像文件来解决上述问题，比如使用相同显示效果的图片但包含多个不同的分辨率（分辨率切换），或者使用不同的图片以适应不同的空间分配（美术设计）。

备注： 在本文中讨论的新特性——srcset/sizes/——都已经为新版本的现代浏览器和移动浏览器所支持。