响应式开发中的图片处理

翻译自Peter LePage

一个网页中平均约60%的数据量是被图片占据的，所以在响应式开发中注重图片的优化可以很大程度上提高网页的性能，例如为低分辨率的屏幕推送低分辨率的图片可以避免流量的浪费。

图片标签

HTML中的img元素负责下载，解码并加载图片内容。做到以下几点可以帮助网页实现更好的体验：

使用相对尺寸

使用相对尺寸定义图片可以防止其超出可视范围。例如设置width: 50%可以保证图片的宽度是其父元素的50%（不是可视范围的50%也不是其实际尺寸的50%）。

因为CSS允许内容超出容器，可以使用max-with: 100%来避免图片以及其他内容超出容器范围。

利用`srcset`为高分辨率屏幕加载高质量图片

利用img元素的srcset属性可以很方便地在不同的屏幕加载不同的图片文件。浏览器会根据设备的特定选择最佳的图片来显示，例如在retina屏幕上加载双倍分辨率的图片，或者在网速不好的情况下加载较小的图片。

对于不支持srcset的浏览器, img元素会加载src指向的图片。对于支持srcset的浏览器，在请求页面之前会先解析srcset的内容（图片和相应的加载条件），只有最合适的图片会被下载并显示。

理论上图片加载条件可以是像素密度（pixel density）或屏幕高宽，但是现在只有像素密度的支持性比较好。

使用`picture`元素

picture 元素可以根据不同的设备特性加载不同的图片版本，例如设备尺寸，分辨率，方向等等。

一个picture元素中可以包含多个source元素，分别对应在不同情况下需要加载的图片。

在这个例子中，当浏览器宽度大于800像素时会根据屏幕分辨率加载head.jpg或者head-2x.jpg。当浏览器宽度介于450像素与800像素之间时，会根据屏幕分辨率加载head-small.jpg或head-small-2x.jpg。当浏览器宽度小于450像素或者浏览器不支持picture元素时，浏览器会渲染img元素，因此保证picture元素中包含有一个img元素。

相对尺寸图片

在一个响应式页面中，图片尺寸可能随着浏览器的缩放而改变，因此无法预先知道图片的有效像素密度。可以通过为图片文件添加宽度描述来使浏览器自动计算像素密度从而加载最合适的图片。

这个例子会加载一张宽度为浏览器可视区域宽度一般的图片，并且根据浏览器宽度和设备像素比选择合适的图片加载

相对尺寸的图片

在很多情况下，图片布局也会随着浏览器尺寸的变化而改变，例如在小屏上要求图片撑满可视区域宽度，然而在大屏幕上要求图片只占可视范围的一小部分。

在这个例子中，当浏览器宽度大于600像素时，图片宽度是可视区域宽度的25%；当浏览器宽度在500像素到600像素之间时，图片宽度是可是宽度的50%；当浏览器宽度小于500像素时，图片撑满可视区域宽度。

CSS中的图片

CSS中的background属性可以使图片通过多种方法呈现，另外通过CSS3中的媒体查询也可以响应式地加载图片。

使用媒体查询动态加载背景图片

使用媒体查询可以虽然浏览器窗口缩放加载不同版本的图片

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

使用`image-set`提供高分辨率图片

使用CSS的image-set()函数可以根据设备特性加载不同版本的图片，作用和标签的srcset属性相似

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

image-set()不仅控制图片的加载，而且会根据加载的图片进行缩放缩放。浏览器默认2x的图片尺寸是1x图片的两倍，因此会缩小2x的图片使得显示出的图片大小相同。

由于image-set()只支持Chrome和Safari浏览器，所以在使用时要考虑到浏览器的兼容性，例如：

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

使用媒体查询加载高分辨率图片

媒体查询可以使用设备像素比作为规则，在高分屏幕上加载高分辨率图片，例如：

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* 高分辨率的图片资源 */
}

这个例子中的两个判断条件其实是等价的，其中min-resolution是标准写法，但是只有Chrome, Firefox和Opera浏览器支持。