前端關於圖片的優化

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

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

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