13.2 缩放图像带来的问题
响应式Web图形设计
使用CSS缩放图像只能算解决一半问题。光栅图像的脆弱在于必须为显示尺寸准备像素足够大的图像。图像被拉长或拉宽的时候，它没有多余的像素数据供其添加。因此，边缘会变得模糊不清。这就是为什么一开始最好从尽可能最大的尺寸开始着手处理图像。该尺寸可能是一个非常大的显示器宽度。
13.2.1 大尺寸图像
在创作本书期间，戴尔公司推出了UltraSharp U3011显示器，30寸超大尺寸，2 560×1 600分辨率。因此，能够匹配此屏幕的自适应图像可能会非常大（正如第4章所述，先确认你的网站浏览数据，看看你的网站是不是真的需要适应这么大的显示器）。
图13.2到图13.4 展现了像素数据的增加与图像文件大小增加的关系。
13.2.2 更大尺寸的图像
以今天的标准来看，戴尔的此款屏幕大了点，但还有另一类屏幕设备以截然不同的方式打包数据：它们缩小了像素点，提高了密度。苹果公司称其为Retina高密度屏，也正成为Windows操作系统硬件制造的趋势。
通过width:max-width这类CSS规则的控制，常规显示器尺寸的高密度屏能够呈现所有的视觉信息。为了显示出清晰的图像，我们需要提供两倍于原有显示尺寸的图像才可以。很自然地，更多的像素信息意味着图像文件也更大了（见表13.1）。
尽管图13.5、图13.6和图13.7在“物理体积”上更大，但是，在高密度屏幕上的大图像和常规屏幕上的小一些的图像看起来大小是一样的。
13.2.3 把网速考虑进来
这些自适应图像的体积在不断增大，但使用宽带连接的用户还可以接受目前的下载速度。但是我们不会总有那么好的运气，可以一直使用速度超快的Wi-Fi热点。
上班、下班途中，或者出游时，我们只能依赖于缓慢的移动网络服务来保持网络连接。尽管我们的手机和平板电脑越来越多地使用了高清屏，然而我们还得指望因地变化的、顺畅的互联网网络服务。
因此，如果我们使用了大尺寸图像（无论是高清还是常规屏幕），可能会强迫用户接受多于他们实际需求的数据——尤其是他们的套餐数据流量有限的时候。