[優化]圖片轉成 Base64 編碼字串，降低連線請求

發表時間：

網頁圖片常常是網站載入緩慢的原因之一，而文字、字串通常是載入速最快的，網頁如果都是文字而沒有圖片，相對的讀取速度是非常的迅速。是否有想過將圖片轉成字串？來加快網頁速度呢？其實我們可透過base64的方式，將圖片轉成文字編碼，這樣對於網頁的載入，就不算是一個連線了，確實是有助於網頁開啟的幫助，因為這樣可以降低網頁連線請求數量。

在網站建置上，很多人都想要讓網站變得更快，讓訪客進來的第一體驗是最棒的，但往往礙於網站引用太多的外部資源造成連線異常的卡，因為網站的載入中，每一個網域每次能載入的資源有限，所以如果能夠降低請求數，勢必能替網站加快許多，所以前面我們提到了可以透過base64來將圖片轉成文字，少掉一些連線請求，加快網頁開啟。

一個網域每次開啟網頁能開放的連線數有限制，就好比一個門的寬度，胖子的話每次就只能一個人通過，如果是比較瘦的，就可以兩個人同時走過去，在門無法變大的狀況下，我們該怎麼加快大家進入房子的速度？網站連線請求數也是如此，假設每次同時間僅能請求5個檔案，只要有檔案讀取完才可以再讀取下一個檔案，但是透過base64的方式，把這些圖片透過另一種管道讀取進來，就不再受限於每次同時僅能讀取5個檔案的限制。

使用base64時，若發現圖片轉換成文字後是好幾MB，那基本上我還是建議您不要轉該圖片，或者是網站上都是圖片，那就還是保持原先的連線即可，或者是透過Lazyload延遲圖片載入。base64比較適合將一些小圖片轉成文字，例如社群小圖、網站小圖等等，其他內容圖片或是banner圖片，就不建議這樣轉換了。補充，如果是Javascript卡住，可以使用Javascript延遲載入。

文章目錄
  1. base64 圖片編碼應用參考
  2. base64 有什麼缺點？

base64 圖片編碼應用參考

其實這個玩意，Google已經使用很久了，不知道大家有沒有去Google圖片搜尋中找過圖片？有時候我們看到圖片不錯，想說到網站內去取得他的原始圖檔，殊不知竟然原始網站倒了，那為什麼Google還存有這些圖片？一般思考就是Google會快取一些資料下來，這樣的邏輯是沒錯的，確實有些圖片是這樣被塊取下來，但是在搜圖服務中為了要讓開啟更快，其實Google做了一些小應用。首先你可以在搜圖中找一張圖片點選一下，接著再點選上方的原圖，利用滑鼠右鍵選擇【在新分頁開啟影像】。

[優化]把圖片轉成Base64編碼字串，降低連線請求

有沒發現網址列不太一樣？這就是base64的圖片應用，把圖片轉成一大串文字，就算網站不見了，圖片原始連結不在了，只要有這張圖的base64編碼，圖片就永遠存在。

[優化]把圖片轉成Base64編碼字串，降低連線請求

 

第1步  來到base64 image網站，點選﹝Upload image﹞按鈕。

[優化]把圖片轉成Base64編碼字串，降低連線請求

第2步  接著請選擇您要轉換的圖片，然後點選﹝encode image﹞進行編碼。

[優化]把圖片轉成Base64編碼字串，降低連線請求

第3步  香腸編碼的圖片是一張小小的縮圖，因為將網頁連線浪費在小圖上是很不值得的XD。你看編碼完後其實很短(因為圖真的很小)。

[優化]把圖片轉成Base64編碼字串，降低連線請求

第4步  將網頁往下拉，他有提供一些應用，比方說用在CSS的背景圖片或者是html中的img語法以及xml的使用方式。

[優化]把圖片轉成Base64編碼字串，降低連線請求

第5步  最後香腸來編碼一張logo，直接使用編碼後的圖片，這樣應該比較有感XD。

( 原圖:11.3KB；編碼後:15.1KB，雖然大一點點，但是少一個連線數)

[優化]圖片轉成 Base64 編碼字串，降低連線請求

 

base64 有什麼缺點？

簡單來說，base64 image 在過於老舊版本的瀏覽器是無法顯示的，如果你看不到上面那一張DEMO圖片，就表示你瀏覽器該換了，使用IE9、IE10、Firefox、Google Chrome都是可以看到的。其實缺點還有一個就是編碼後是一堆用人眼無法理解的編碼，放在網站上可能比較不好看，程式碼感覺比較混亂一點這樣。因此通常香腸會建議針對CSS的小圖片使用會來得比較好哦！

在Google News上追蹤我們最新文章