img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题，比方说我需要在retina高的硬件上看到更细腻的图片，又或者我要在电脑看到的图片和在手机上的图片不一样。
解决以上问题，我们可以使用css 中的@media 去实现，可是代码量超出了想象。有了这功能我们就能很好的处理需求，接下来我做个简单的解释，循序渐进的给大家说明。
1. 高 retina
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x, mdn-logo-VHD.png 3x ">
游览器会在加载图片前判断要使用那个图片依据设备的retina。
*注意：所有的图片宽度都是一样，但是质量会改变
2.不同设备宽度使用不同图片
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 400px">
先了解sizes属相，size就是尺寸的意思，图片属性先判断目前要用那个宽度来找srcset
以上的例子是说小于600会使用200px， 不然就下一个表达式（400px）
假设现在设备的宽是700px，那么sizes就等于400px，在srcset里寻找400 以上或等于的图片。
-----
伙伴们一定有很多奇怪的想法，这里我就不一个一个的列出来了。
几项事物要注意，
-在使用sizes时，一定要使用srcset
-srcset 使用只能选着2x 或者 200w ，其中一个