img srcset 和 sizes

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 ，其中一个