網頁設計, 網頁資源

b64.io 線上將圖片轉Base64文字編碼,讓網頁載入更順暢

梅干2017/06/16
梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
  網頁的構成不外乎就是圖加文字,往往文字一定都會圖片來的快,最主要的原因就在於,文字的載入速度一定會比圖片來的快,同時向主機請求的次數相當的低,不像圖片當使用的數量愈多,向主機請求的次數就愈高,且當大量向主機請求時,還會造成連線中斷,使的圖片出現叉燒包,因此這時可以將一些圖示類的圖片,轉成base64的形式,就是將圖片轉成文字編碼,如此一來就能有效的降低,向主機請求的次數,進而加快網頁的載入速度。
  將圖片轉成base64的文字編碼,無論是jpg、png、svg都沒問題,雖然說將圖片轉換成文字編碼,但檔案不會比原來的小,只是少了圖片請求的次數,同時將圖片轉成base64時,也無需將圖片上傳,等於是把照片直接內嵌到網頁中,但要如何將圖片轉換成base64呢?現在只需透過這個平台,立即就能將圖片變成base64文字編碼,同時還支援多檔轉換,相當的方便喔!
b64.io
網站名稱:b64.io
連結網址:http://b64.io/

Step1
當進到b64.io的網站後,可點上方的綠色區塊選擇圖檔,或是直接拖拉到綠色區塊上方。
梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step2
而b64.io這平台支援多檔轉換,因此將要轉換的圖片,直接拖拉到綠色的區塊上方。
梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step3
放開滑鼠後,就會開始進行轉換,當轉換完成後,下方就會出現已轉好的編碥,再將這些編碼複製到網頁中。
梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step4
把剛產生的編碼,貼到style中,並在body裡建立要顯示的標籤,除了可用背景的方式顯示,也可用img的方式,當要用img時,只需將data:的碼貼到src就可以了。
梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step5
開啟網頁,就會看到,剛一長串的文字,就會顯示成圖片啦!真的很方便,這對於小圖示來說,相當的方便,若一次有上百個圖示要載入,建議用此方法會快速許多喔!
梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
[範例預覽]
UAG軍規iPhone防摔殼