把圖片轉成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會導致程式看起來很亂,所以建議用在圖片較少的網站,圖片多或大的就用別用了!

  • Do you know that base64 encode will increase the image size by 33%? I think the amount of file requests is decreased BUT the requested content will increase in size so the bandwidth used will be bigger if all images uses base64. I’ll only use it on icons or very small images.

    • s3131212

      base64會增加檔案大小?不過文字照理來說不是應該比圖片來的小嗎?

      • No it won’t. Text is also a kind of data and the size increases if there is more text. See this: http://en.wikipedia.org/wiki/Base64

        • s3131212

          所以轉成Base64與原始圖片比較,哪個檔案比較大?

          • The base64 ones

            • s3131212

              所以為了省流量而把圖片轉成Base64的人不就是白痴了…..
              看來我誤會大了

  • 謝提供啦~~
    可惜我不會用~~
    (我有好多圖片!!)

    • 我也不會用
      不然文章會變很亂