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