2017年6月15日 星期四

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

  網頁的構成不外乎就是圖加文字,往往文字一定都會圖片來的快,最主要的原因就在於,文字的載入速度一定會比圖片來的快,同時向主機請求的次數相當的低,不像圖片當使用的數量愈多,向主機請求的次數就愈高,且當大量向主機請求時,還會造成連線中斷,使的圖片出現叉燒包,因此這時可以將一些圖示類的圖片,轉成base64的形式,就是將圖片轉成文字編碼,如此一來就能有效的降低,向主機請求的次數,進而加快網頁的載入速度。

  將圖片轉成base64的文字編碼,無論是jpg、png、svg都沒問題,雖然說將圖片轉換成文字編碼,但檔案不會比原來的小,只是少了圖片請求的次數,同時將圖片轉成base64時,也無需將圖片上傳,等於是把照片直接內嵌到網頁中,但要如何將圖片轉換成base64呢?現在只需透過這個平台,立即就能將圖片變成base64文字編碼,同時還支援多檔轉換,相當的方便喔!


b64.io
Step1

當進到b64.io的網站後,可點上方的綠色區塊選擇圖檔,或是直接拖拉到綠色區塊上方。

梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step2

而b64.io這平台支援多檔轉換,因此將要轉換的圖片,直接拖拉到綠色的區塊上方。

梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step3

放開滑鼠後,就會開始進行轉換,當轉換完成後,下方就會出現已轉好的編碥,再將這些編碼複製到網頁中。

梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step4

把剛產生的編碼,貼到style中,並在body裡建立要顯示的標籤。

梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢
Step5

開啟網頁,就會看到,剛一長串的文字,就會顯示成圖片啦!真的很方便,這對於小圖示來說,相當的方便,若一次有上百個圖示要載入,建議用此方法會快速許多喔!

梅問題-b64.io 線上將圖片轉成Base64編碼,讓網頁載入更順暢



from 梅問題.教學網 https://www.minwt.com/webdesign-dev/html/17754.html

沒有留言:

張貼留言