使用base64編碼代替圖片

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

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

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

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

合并圖片sprite(雪碧圖)

場(chǎng)景：任何用到頁(yè)面圖片的場(chǎng)景

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

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

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

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

css代替圖片

場(chǎng)景：適用于移動(dòng)端或較高級(jí)的瀏覽器，而且繪制的圖案較為簡(jiǎn)單。

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

優(yōu)勢(shì)：具有實(shí)現(xiàn)簡(jiǎn)單，圖片體積小的特點(diǎn)，可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)效果

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

svg的描述和適用場(chǎng)景上文已說明。

canvas代替圖片

場(chǎng)景：需要高性能的圖片或動(dòng)畫

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

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

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

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

響應(yīng)式圖片

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

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

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

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

圖片壓縮

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

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

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

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

更好的圖片格式

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

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

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

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