響應式開發學習（3）——圖片最佳化，響應開發

響應式開發學習（3）——圖片最佳化，響應開發

1.為什麼要用響應式圖片

　　這是一個關於網頁圖片資料表圖（連結是這是倆個字），在手機網站訪問時 圖片約網站的60%的流量，圖片不是在所有裝置表現的十分良好。就這麼舉例子吧，做一個電商網站買東西，你圖片載入半天了，誰還買，客戶就流失了，或者圖片不適應設配大了或者變得。。。。模糊都是問題。

2.怎麼看你網站的響應速度 還是開發人員工具 

　　我習慣用chrome 別的我不會哈哈。F12 開啟。選擇Network 載入各個檔案的資料都有了。

3.照片等檔案尺寸取決於像素數量*每個像素的位元的數量 因此為了提高網站的效能要儘可能使用更小的尺寸和更高壓縮率的圖片

因為網站請求，每個網頁平均發出56個請求載入圖片，每次請求都是對頁面載入的一項成本。每一次的頁面延誤都都會造成明顯的流量和經濟損失

這是資料表http://httparchive.org/trends.php#bytesImg&reqImg  

4.相對大小

　　①對於筆記本和台式機這樣的裝置，不要假設視窗尺寸和螢幕尺寸相同，也不要假設視窗會一直保持相同的大小。使用max-width是一個不錯的選擇，要記住不同大小的選擇

　　②如果想要兩張圖片並列對齊調整相對尺寸為50%或者使用calc

img{   float:left;   margin-right:10px;   width:calc(100%-10)/2 }

calc() 總寬度減去邊距除以圖片數量。

5.橫向和縱向，行動裝置都是縱向顯示，筆記本台式機是橫向顯示，這個關於圖片的顯示你要注意。

6.CSS vh單位vh是視圖高度的縮寫，一個vh單位對應1%的視圖高度同樣還有vw 還有vmin和vmax一旦設定vmax 圖片會鋪滿整個視圖地區。

7.前面說到要用小尺寸和高壓縮的得圖片，這裡我說片壓縮。

https://github.com/pornel/ImageAlpha 這有個工具 

8.srcset

這個比較複雜回來說 我先研究研究

9.最後說一個picture 標籤

它可以讓你根據以下條件載入完全不同的映像：

• 媒體特性結果如：視口的當前高度(viewport height)，寬度(width)，方向(orientation)。

• 載入適當大小映像的檔案，使可用頻寬得到充分利用。
• 載入不同裁剪並具有不同縱橫比的映像，以適合於不同寬度的布局變化。
• 載入更高的像素密度，顯示更高解析度的映像。

  <picture>    <source srcset="smaller.jpg" media="(max-width: 768px)">    <source srcset="default.jpg">    <img srcset="default.jpg" alt="My default image"></picture>　　例子和上面一樣。