使用base64編碼代替圖片

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

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

優(yōu)勢：減少http的請求次數(shù)，并可以放到后臺數(shù)據(jù)庫中，只傳輸字符串，有較多的構(gòu)建工具可以直接實現(xiàn)

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

合并圖片sprite(雪碧圖)

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

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

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

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

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

css代替圖片

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

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

優(yōu)勢：具有實現(xiàn)簡單，圖片體積小的特點，可以實現(xiàn)簡單的動態(tài)效果

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

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

canvas代替圖片

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

原理：適用html5的canvas元素繪制創(chuàng)建圖片

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

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

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

響應(yīng)式圖片

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

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

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

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

圖片壓縮

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

原理：對圖片進行無損、有損壓縮，轉(zhuǎn)為壓縮后圖片來實現(xiàn)

優(yōu)勢：減少圖片加載流量，效果比較明顯

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

更好的圖片格式

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

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

優(yōu)勢：減少圖片加載流量，效果比較明顯

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