响应式图片的设计

问题：为什么不提供精确的图片尺寸呢？

在这一点上，你也许会疑惑为什么不直接提供在页面中使用图片的精确尺寸呢。

首先，响应式设计中设定自适应图片断点的目的是让图片随着视口改变而伸缩。如果提供页面中使用图片的精确尺寸，不论是视口尺寸改变还是设备旋转都需要下载新图片。

其次，提供任何能想到尺寸的图片是不可能的。是的，我们可以动态改变图片尺寸，但与此同时，服务器需要处理这些工作就会拖慢分发图片到浏览器的速度。

因此，大多数网站把图片缓存在内容分发网络（CDN）上。要把每个尺寸的图片缓存在CDN上是非常昂贵的。

最后，浏览器在开始下载时并不知道页面中图片的确切尺寸。

方法：怎么解决这个问题？

你团队中的某些人会说，“嗨，你觉得这些产品图片需要多少图片源？”

你犹豫了一会儿说，“3个怎么样？小，中，大。”

如果你已经这么做了也不要羞涩。我很确定现在大部分使用响应式图片的人已经这么做了。

也许你的考量中需要兼容手机，平板和桌面也就是小，中，大屏幕。

或者你考虑到图片会显示的范围并估计一下。也许你只是简单看一下主流的断点数量然后决定同样处理图片断点。

我完全理解。显然这比给所有视口提供一张大图片要好。

当然如果我们的决定更有逻辑会更好。