img标签的srcset属性

上篇文章中通过媒体查询给不同分辨率的手机屏幕展示不同的图片，但是适用于背景图，如果使用img标签的话，可以使用img标签上的srcset属性。

以下为MDN相关介绍：

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

一个图像的 URL。
可选的，空格后跟以下的其一：
1. 一个宽度描述符，这是一个正整数，后面紧跟 ‘w‘ 符号。该整数宽度除以sizes属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和x描述符等价的值。
2. 一个像素密度描述符，这是一个正浮点数，后面紧跟 ‘x‘ 符号。
如果没有指定源描述符，那它会被指定为默认的 1x。

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源 在相同的srcset两个源都是 ‘2x‘）也是无效的。

那么，可以按照如下这种方式来书写

<img src="bg.jpg" srcset="bg.jpg 1x, bg_@2x.jpg 2x" />

可以简写为如下

<img src="bg.jpg" srcset="bg_@2x.jpg 2x" />