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

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

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

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

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

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