使用base64編碼代替圖片

場景：適用于圖片大小小于2KB，頁面上引用圖片總數不多的情況

原理：將圖片轉換為base64編碼字符串inline到頁面或css中

優勢：減少http的請求次數，并可以放到后臺數據庫中，只傳輸字符串，有較多的構建工具可以直接實現

劣勢：這種方法僅限于圖片總數較少，而且圖片大小小于2KB的情況。否則圖片字符串會變得很長很長

合并圖片sprite(雪碧圖)

場景：任何用到頁面圖片的場景

原理：將多個頁面上用到的背景圖片合并成一個大的圖片在頁面中引用

優勢：可以有效的較少請求個數，而且，而不影響開發體驗，使用構建插件可以做到對開發者透明。適用于頁面圖片多且豐富的場景。

劣勢：生成的圖片體積較大，減少請求個數同時也增加了圖片大小，不合理拆分將不利于并行加載

使用css、svg、canvas或iconfont代替圖片

css代替圖片

場景：適用于移動端或較高級的瀏覽器，而且繪制的圖案較為簡單。

原理：css方式可以用來繪制相對簡單的團來代替圖片，一般使用before或者after偽元素來豐富圖案的復雜度。

優勢：具有實現簡單，圖片體積小的特點，可以實現簡單的動態效果

劣勢：也受限于css的兼容性特點，繪制復雜圖案困難

svg的描述和適用場景上文已說明。

canvas代替圖片

場景：需要高性能的圖片或動畫

原理：適用html5的canvas元素繪制創建圖片

優勢：整個就是畫2D圖形時，頁面渲染性能比較高，頁面渲染性能受圖形復雜度影響小，性能只受圖形的分辨率的影響，畫出來的圖形可以直接保存為 .png 或者 .jpg的圖形，適合于畫光柵圖像或者不規則圖形

劣勢：沒有dom操作，必須依賴定時器，文字渲染性能差，不能添加描述(title屬性什么的)，兼容性限制

iconfont是一種web字體來代替圖片的解決方案： 場景：代替頁面上色彩單一的圖片 優勢：兼容性好，應用廣，目前使用也很廣泛 劣勢：但是由于字體的顏色設置單一，只能用于代替顏色單一的圖片，對于色彩復雜的圖片，iconfont處理起來比較困難

響應式圖片

場景：不同終端對同一個圖片需求不一樣，可以根據終端加載不同的圖片來節省沒必要的流量

原理：通過picture元素，picturefill或平臺判斷來為不同終端平臺輸出不同的圖片

優勢：減少沒必要的圖片加載，靈活控制，慢速用戶加載小圖片不至于加載失敗，移動端沒必要加載大尺寸圖片等，可以通過不同方式兼容所有瀏覽器

劣勢：無法避免圖片的加載過程，圖片本身沒優化

圖片壓縮

場景：在不得不加載圖片的前提下，要進一步提升優化效果，只能通過有損或無損壓縮來減少圖片的大小。

原理：對圖片進行無損、有損壓縮，轉為壓縮后圖片來實現

優勢：減少圖片加載流量，效果比較明顯

劣勢：服務器和瀏覽器壓力增大，而且服務器需要額外的服務支持

更好的圖片格式

場景：之前說到webp、bpg、sharpP等新圖片格式具有更好的壓縮比，可以使用這類新型的圖片來代替原始圖片

原理：對圖片格式轉換，在畫質可以接受的情況下達到更好的壓縮比效果

優勢：減少圖片加載流量，效果比較明顯

劣勢：服務器和瀏覽器壓力增大，而且服務器需要額外的服務支持，格式轉換要考慮瀏覽器的兼容性