把圖片轉成Base64,讓網站加速

6 / 27, 2012 HTML , 架站技巧 , 網站優化

一直以來如何省流量都讓站長想破頭,目前主要招數有網站壓縮,快取程式,少用JS等,但是圖片卻是無能為力,不過現在~有福了,只要把圖片轉成Base64編碼,就可以轉成”文字版”,看起來沒差,實際上可以減少檔案請求(reuqest),是什麼巫術(誤)招數這麼厲害?


Important:Base64雖然可以減少連線請求,但檔案會「變大」(約增加33~35%),因此並不會節省流量,還會增加流量,所以大圖片請不要使用此方法,謝謝


先到轉換網站把圖片上傳並按下Encode
http://www.opinionatedgeek.com/dotnet/tools/base64encode/
註:如果網站掛了,直接收尋base64 encoder就能找到一堆了
有在Encoded Output看到外星文嗎?把他複製下來
在要放置圖片的地方輸入

<img src="data:image/png;base64,把剛剛複製的base64編碼放在這裡" width="寬度" height="高度">

註:絕對不要換行
註:如果不懂,也可以看一下這篇文章的原始碼,就可以從下面測試結果的html找到!
程式測試結果(看不到的話代表瀏覽器可能要更新囉!):

以下是直接上傳圖片的範例
Base64圖片範例
看起來幾乎一模一樣對不對!可是事實上已經少了一個請求!
不過要注意一下,目前IE系列只有IE9支援,而且條件是不可以開起相容模式,所以要不要用必須想一下
最後,還有一件是要說,由於使用base64會導致程式看起來很亂,所以建議用在圖片較少的網站,圖片多或大的就用別用了!