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