响应式图像

网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”（responsive web design）。响应式设计的网页图像，就是“响应式图像”（responsive image）。

响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。这里只介绍语义性最好的 HTML 方法，浏览器原生支持。

问题的由来

我们知道，<img>标签用于插入网页图像，所有情况默认插入的都是同一张图像。

  1. <img src="foo.jpg">

上面代码在桌面端和手机上，插入的都是图像文件foo.jpg。

这种处理方法固然简单，但是有三大弊端。

（1）体积

一般来说，桌面端显示的是大尺寸的图像，文件体积较大。手机的屏幕较小，只需要小尺寸的图像，可以节省带宽，加速网页渲染。

（2）像素密度

桌面显示器一般是单倍像素密度，而手机的显示屏往往是多倍像素密度，即显示时多个像素合成为一个像素，这种屏幕称为 Retina 屏幕。图像文件很可能在桌面端很清晰，放到手机上会有点模糊，因为图像没有那么高的像素密度，浏览器自动把图像的每个像素复制到周围像素，满足像素密度的要求，导致图像的锐利度有所下降。

（3）视觉风格

桌面显示器的面积较大，图像可以容纳更多细节。手机的屏幕较小，许多细节是看不清的，需要突出重点。

响应式图像 - 图1

响应式图像 - 图2

上面两张图片，下方的手机图片经过裁剪以后，更突出图像重点，明显效果更好。

srcset属性

为了解决上面这些问题，HTML 语言提供了一套完整的解决方案。首先，<img>标签引入了srcset属性。

srcset属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。请看下面的例子。

  1. <img srcset="foo-320w.jpg,
  2.              foo-480w.jpg 1.5x,
  3.              foo-640w.jpg 2x"
  4.      src="foo-640w.jpg">

上面代码中，srcset属性给出了三个图像 URL，适应三种不同的像素密度。

图像 URL 后面的像素密度描述符，格式是像素密度倍数 + 字母x。1x表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图像。

如果srcset属性都不满足条件，那么就加载src属性指定的默认图像。

sizes属性

像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性。

第一步，srcset属性列出所有可用的图像。

  1. <img srcset="foo-160.jpg 160w,
  2.              foo-320.jpg 320w,
  3.              foo-640.jpg 640w,
  4.              foo-1280.jpg 1280w"
  5.      src="foo-1280.jpg">

上面代码中，srcset属性列出四张可用的图像，每张图像的 URL 后面是一个空格，再加上宽度描述符。

宽度描述符就是图像原始的宽度，加上字符w。上例的四种图片的原始宽度分别为160像素、320像素、640像素和1280像素。

第二步，sizes属性列出不同设备的图像显示宽度。

sizes属性的值是一个逗号分隔的字符串，除了最后一部分，前面每个部分都是一个放在括号里面的媒体查询表达式，后面是一个空格，再加上图像的显示宽度。

  1. <img srcset="foo-160.jpg 160w,
  2.              foo-320.jpg 320w,
  3.              foo-640.jpg 640w,
  4.              foo-1280.jpg 1280w"
  5.      sizes="(max-width: 440px) 100vw,
  6.             (max-width: 900px) 33vw,
  7.             254px"
  8.      src="foo-1280.jpg">

上面代码中，sizes属性给出了三种屏幕条件，以及对应的图像显示宽度。宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为254px。

第三步，浏览器根据当前设备的宽度，从sizes属性获得图像的显示宽度，然后从srcset属性找出最接近该宽度的图像，进行加载。

假定当前设备的屏幕宽度是480px，浏览器从sizes属性查询得到，图片的显示宽度是33vw（即33%），等于160px。srcset属性里面，正好有宽度等于160px的图片，于是加载foo-160.jpg。

如果省略sizes属性，那么浏览器将根据实际的图像显示宽度，从srcset属性选择最接近的图片。一旦使用sizes属性，就必须与srcset属性搭配使用，单独使用sizes属性是无效的。