CherisFront-End Engineer

早在2010年响应式网页的概念就已经出现，对于响应式网页设计，带来多设备适配的同时，也存在一些问题。使用同一图像源，要么在手机上加载一个巨大的图像，要么在一个大显示器上显示模糊、马赛克状的图像。

我们无法预测用户在何地以及如何访问我们的网站，所以我们需要浏览器自身根据情况选择最好的图像。

img元素增加了两个新属性：srcset和sizes。

• srcset用来声明一组图像源，浏览器根据我们使用描述符指定的条件来选择图像。
  描述符x表示图像的像素密度，描述符w表示图像的宽度；浏览器使用这些信息从列表中选择合适的图像。
• sizes属性为浏览器提供将要显示图像的尺寸信息，srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像。

基于设备象素比（device-pixel-radio）选择
基于viewport选择
基于Art direction（美术设计）选择
基于图像格式选择

相同质量不同图像的加载

固定宽度图像：基于设备像素比选择

在 视网膜屏幕，4K显示器，UltraHD 等设备上，不仅要考虑屏幕的分辨率，而且需要考虑像素密度，它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。
有些图片不管屏幕尺寸，始终以固定宽度显示，如logo、头像，浏览器需要根据像素比来选择加载哪张图像。

srcset 属性列出了浏览器可选择加载的源图像池，由逗号（,）分隔，描述符x表示图像的设备像素比，浏览器根据运行环境选择实弹的图像。低版本浏览器忽略srcset属性。

1

<img srcset="crest-300.jpg 1.5x, crest-400.jpg 2x" src="crest-200.jpg" alt="crest" >

可变宽度的图像：基于viewport选择

与内容相关的图片，通常也需要响应式，它们的大小往往随viewport改变。

srcset 属性搭配描述符w，w告诉浏览器列表中每个图像的宽度。
sizes 属性列出了媒体列表，由逗号（,）分隔。第一个条件是媒体条件，第二个是源图尺寸值，此值决定图片的宽度，vw是唯一可用的css单位。

1
2
3
4
5
6
7

<img srcset="uswnt-480.jpg 480w,
             uswnt-640.jpg 640w,
             uswnt-960.jpg 960w,
             uswnt-1280.jpg 1280w" 
     sizes="(max-width: 400px) 100vw, 
            (max-width: 960px) 75vw, 
            640px" src="uswnt-640.jpg" alt="uswnt">

浏览器在viewport宽度小于400像素时，使图像的宽度与viewport等宽。在viewport宽度小于960像素时，使图像的宽度为viewport宽度的75％。当viewport大于960像素时，使图像的宽度为640像素 。

浏览器利用srcset和sizes信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素，图像最可能以75vw的宽度显示。浏览器将尝试加载第一张大于450像素（6000.75）的图像，也就是uswnt-480.jpg。如果我的是dpr为2的Retina显示屏，那么浏览器就会尝试加载第一张大于900像素（6000.75*2）的图像，也就是uswnt-960.jpg。我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。

srcset和size列表是对浏览器的一个建议(hint)，而非指令。例如，设备像素比(dpr)为1.5的设备，亦可用1x也可用2x的图像，由浏览器根据其能力、网络等因素来决定。

不同宽度不同图像

不同宽度下显示稍微不同的图像，比如在较窄屏幕下仅显示图像的关键部分，那么要使用picture元素。

picture：基于Art direction（美术设计）选择

picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载图片，如果没有img，那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。基于美术设计选择的适用场景为：在一个特定的转效点（breakpoint）需要显示一个特定的图像。使用picture元素选择图像，不会有歧义。

1
2
3
4
5

<picture>
  <source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
  <source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
  <img src="ticker-tape-small.jpg" alt="USWNT ticker-tape parade">
</picture>

在本例中，当viewport大于960像素时，会加载图像的风景模式版本（ticker-tape-large.jpg）。当viewport宽度大于575像素时，浏览器会加载图像的裁剪过的肖像模式版本（ticker-tape-medium.jpg）。而当宽度小于575像素时，加载的图像（ ticker-tape-small.jpg）已经被裁剪成焦点仅在一个球员上了。
picture元素是向后兼容的；不支持picture元素的浏览器将显示img。图像的所有标准属性（如alt），应该作用在img上而不是picture上。

source：基于图片格式选择

最近几年出现了一些新的图片格式，这些新图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错，但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错，但只有Chrome和Opera原声支持。JPEG-XR，最初被称为高清照片，是微软发布的一个专有图像格式，仅Internet Explorer支持。

1
2
3
4
5
6

<picture>
  <source type="image/vnd.ms-photo" src="wwc2017.jxr">
  <source type="image/jp2" src="wwc2017.jp2">
  <source type="image/webp" src="wwc2017.webp">
  <img src="wwc2017.png" alt="WWC 2015">
</picture>

source的type属性用来指定每个图像的MIME类型，浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的，如果浏览器无法识别所有的图象类型，它会回退至原来的img元素。