响应式图片img中的srcset和sizes

响应式图片img中的srcset和sizes

参考链接
如果是在小屏手机屏幕上显示网页，那么没有必要在网页上嵌入很大的图片。这被称之为分辨率切换问题（resolution switching problem）—一张位图被设置为固定像素的宽和高。当我们看矢量图形时，一张较小的位图看来会有颗粒感，如果位图显示的尺寸大于原始尺寸（然而矢量图不会这样）。

相反，没有必要在比图片实际尺寸小的屏幕上显示一张大图，这样做会浪费带宽——当可以在设备上使用小图像时，手机用户尤其不愿意因为下载用于桌面的大图像而浪费带宽。理想的情况是当访问网站时依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。

h5中的img的新特性解决了这个问题。
img中的srcset和sizes被大多数的新版本的现在浏览器和移动浏览器所支持。

code:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy" />

注意格式要对：每一行都有不同的属性值，每个属性值之间都有逗号分隔。

• srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。
• sizes定义了一组媒体条件（屏幕的宽度），以上边为例，当屏幕的宽度小于480px的时候，图像将填充的槽的宽度是440px。

注意：

对于槽的宽度，你也许会提供一个固定值 (px, em) 或者是一个相对于视口的长度(vw)，但不是百分比。你也许以及注意到最后一个槽的宽度是没有媒体条件的，它是默认的，当没有任何一个媒体条件为真时，它就会生效。 当浏览器成功匹配第一个媒体条件的时候，剩下所有的东西都会被忽略，所以要注意媒体条件的顺序。

所以，有了这些属性，浏览器会：

• 查看设备宽度
• 检查sizes列表中哪个媒体条件是第一个为真
• 查看给予该媒体查询的槽大小
• 加载srcset列表中引用的最接近所选的槽大小的图像

就是这样！所以在这里，如果支持浏览器以视窗宽度为480px来加载页面，那么(max-width: 480px)的媒体条件为真，因此440px的槽会被选择，所以elva-fairy-480w.jpg将加载，因为它的的固定宽度（480w）最接近于440px。800px的照片大小为128KB而480px版本仅有63KB大小—节省了65KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。