前端關於圖片的優化

在某些項目中需要載入大量的圖片，會大大的影響載入速度。這裡總結了幾種前端關於圖片優化的方法：

1 使用恰當的圖片格式：

 常見的圖片格式有png\jpg\gif等，有的修飾圖片或者有特殊要求的圖片例如背景要求透明可能更適合無損壓縮的png,而絕大多數的圖片用jpg格式的就可以滿足需求了。GIF格式的多用於動畫，不過動畫也建議用video標簽或者視頻形式，svg也可。

2 儘量不用圖片

 比如在頁面開發時某些圖片或者修飾可以通過給特定的標簽添加樣式來實現，就省去了圖片的引入。
 常見的例如 三角形，圓形，不規則放置的直線，半透明，陰影，邊框，漸變等等。

3 圖片的引入方式的選擇

我們知道前端頁面的圖片引入方式主要有兩大類：
     1 通過img標簽
     2 通過css的background屬性
     3 應該還有其他的方法，有待探索 
這裡可以根據實際情況來選擇合適的引入方法。

4 圖片壓縮

  圖片的清晰度和大小能夠滿足一般的需求就可以了，沒必要太大，這個時候可以通過各種圖片壓縮器，將圖片大小儘可能的壓縮，減小網站載入圖片的容量大小，提高載入速度。
這裡分享一款壓縮工具：

5 資源的lazyload或postpone

 lazyload：延遲到其他資源下載完成後再載入
 postpone：延遲到元素可見再載入。

針對某些需要大量同步載入的圖片數據可以用延遲可見或載入的辦法來使網頁載入圖片時更優化合理。但是這種策略，目前都需要對應的腳本。

6 字體圖標

針對網頁中需要實現的圖標或者同種圖標的不同顏色，可以用字體圖標的形式，使用方便簡單

7 使用data url。

資源內嵌於CSS或HTML中，而不必單獨請求。註意，多個地方都要使用的資源不一定適合用此優化方式，因為圖片數據重覆多了，增加流量。另外許多瀏覽器對data url有長度限制，註意資源的大小。

8 css sprite

以上是個人在做項目時使用總結的東西，關於圖片的優化方法還在繼續探索中。。