圖片處理是前端工做中很重要的一部分,前段時間,個人一個項目中,使用的圖標字體在線上不能使用,原來是由於跨域的問題,後臺大哥就跟我說,你嘗試下把圖標字體轉換成base64不成了,囧,我到如今還沒弄懂怎麼把圖標字體轉換成base64編碼,可是,這並不妨礙我研究一下這個'小玩意'.css
其實,圖片的base64編碼就是能夠將一副圖片數據編碼成一串字符串,使用該字符串代替圖像地址.前端
咱們在網頁上所看到的每一張圖片都是要消耗一個http請求下載而來(固然,雪碧圖就另說了),若是圖片的下載不須要想服務器發出請求,就能夠下載到本地,那就會減小服務器壓力,而base64正好能解決這個問題.chrome
固然,base64也不是說用在什麼地方都好,好比說有些圖片自己4KB,可是轉換成base64以後超過了5K(即時base64編碼可以被gzip壓縮,壓縮率能達到50%以上),並且一個元素的css樣式超過幾千個字符,對css總體的可讀性會形成十分重大的影響,代碼冗餘使得base64編碼得不償失.跨域
若是圖片足夠小且由於用處的特殊性沒法被製做成雪碧圖,在整個網站的複用性很高且基本不會被更新,那麼此時使用base64編碼傳輸圖片就是極好的(最經常使用的地方就是,一些網站的背景,這些背景是由一些小圖經過重複組成的.)瀏覽器
簡單陳述一下base64編碼和雪碧圖的特色緩存
雪碧圖服務器
頁面具備多種風格,須要換膚功能,可使用雪碧圖cookie
頁面已經趨於完美,不會頻繁的改動(如button大小,顏色等)字體
使用時無需重複圖形內容網站
沒有base64編碼成本,下降圖片更新的維護難度
base64編碼
無額外請求
對於極小或則極簡單圖片
能夠被gzip(經過gzip對base64數據的壓縮能力一般和圖片文件差很少或則更強)
下降css維護難度
沒有跨域問題,無需考慮緩存,文件頭或則cookies問題
接下來,說一下,將圖片轉換成base64的方法,其實最簡單的就是在chrome下新建一個窗口,而後將要轉化的圖片直接拖入瀏覽器中,打開控制檯,點source
如圖所示,就是base64的編碼
如圖所示,將它如此放置便可。。。