2011/05/09

圖片編碼後鑲在網頁中

無意間發現 Google 404 頁面中的背景圖片並非以圖片形式存在,瀏覽器將 CSS 中的 base64 解碼後轉成圖片顯示而成。

檢視原始碼可看到:
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKsAAA....)


以這種方式鑲圖片的好處,除了點右鍵沒辦法令存圖片、暫存檔沒有實體檔案外 (其實我原始的目的就是想複製他的圖片 XD),主要的用途是讓瀏覽器不會對伺服器做而外的要求動作。

一般來說,瀏覽器會先取得 HTML,解譯過後發現需要額外的檔案,如:CSS、Javascript、圖片等,就會依照 HTML 中的網址向伺服器要檔案,若檔案數量很大則可能會造成伺服器不少負擔。若是將檔案直接鑲在網頁當中,瀏覽器解譯後直接使用,則不必再向伺服器要求資源。


參考資料:Data URI Scheme @ Wikipedia
http://en.wikipedia.org/wiki/Data_URI_scheme


找到一個工具可以將網路上的資源轉 base64,供大家將資源鑲在網頁中。

Binary / Image File to Base64 Encoder / Translator
http://www.greywyvern.com/code/php/binary2base64

3 則留言:

  1. 話說有人知道怎麼反解嗎? base64 decode 一直失敗 >"<

    回覆刪除
  2. php 的話

    $s = 'iVBORw0KGgoAAAANSUhEUgAAAKsAAA....';
    echo base64_decode(urldecode($s));

    shell 下 php decode.php > img.gif

    回覆刪除
  3. 真假?
    我用 base64 decoder online 解出來的存二進位檔
    但是打不開說 >"<

    回覆刪除