TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個(gè)贊
這兩種情況針對的都是圖片很少或不會更新使用的，所以在某種程度上，相似度很高（比如都可以減少http請求數(shù)、都比直接使用原圖片麻煩一點(diǎn)（一個(gè)需要拼圖，一個(gè)需要轉(zhuǎn)碼）），這兩個(gè)方案的區(qū)別在于：base64編碼方案不會緩存圖片，每次加載都要傳輸較大的html/css；csssprites方案多一個(gè)http連接；綜上，權(quán)衡這兩點(diǎn)，選擇你需要的。update:我個(gè)人看法，建議使用csssprites，雖然多一個(gè)http連接，但根據(jù)你表述的有數(shù)量相當(dāng)?shù)男ize圖片（數(shù)字節(jié)～20KB），如果采用base64編碼方案，目測流量要大大增加。多一個(gè)連接數(shù)對整體影響不大，更何況還有Browser的緩存（這個(gè)是重點(diǎn)）。bugfix:剛忽略了CSS也能緩存，經(jīng)題主提醒，如果將base64編碼寫入css文件，而非html內(nèi)部，相比于csssprites可以減少一個(gè)http請求。另外@p醬也說了多處重用時(shí)無需重復(fù)圖形內(nèi)容。
TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊
比較兩方案相互間的優(yōu)勢。前者的優(yōu)勢在于兼容性好。圖片較復(fù)雜時(shí)構(gòu)造體積較小。多處重用時(shí)無需重復(fù)圖形內(nèi)容。沒有base64編碼成本，降低圖片更新的維護(hù)難度。（但注意Sprites同時(shí)修改css和圖片某些時(shí)候可能造成負(fù)擔(dān)，感謝@noah提醒）后者的優(yōu)勢在于無額外請求。對于極小或極簡單圖片來說數(shù)據(jù)很少。可以被gzip。（通過gzip對base64數(shù)據(jù)的壓縮能力通常和圖片文件差不多或更強(qiáng)）降低css維護(hù)難度。可像單獨(dú)圖片一樣使用，比如背景重復(fù)等。沒有跨域問題，無需考慮緩存、文件頭或者cookies問題。我也來update：總體建議：兩者各有優(yōu)勢。如果是大量簡單小圖片、長時(shí)間不需要修改的、需要重復(fù)平鋪的，可以考慮用base64。如果是經(jīng)常需要修改的、圖片復(fù)雜或比較大的、沒有重復(fù)平鋪需要的，以CSSSprites為優(yōu)。如果訪問量巨大到一定程度，CSSSprites多出的一個(gè)請求對服務(wù)器來說有可能會成為一個(gè)大的消耗，如果服務(wù)器資源緊缺的話可以考慮全部base64。就客戶端而言，對base64解碼和對圖片解碼，性能負(fù)擔(dān)差距不大，一般可以不用太多考慮。
舉報(bào)