Skip to content

Zeroplex 生活隨筆

小 縮小字型大小。 中 重設字型大小。 大 放大字型大小。

圖片編碼後鑲在網頁中

Posted on 2011 年 5 月 8 日2021 年 3 月 12 日 By 日落 在〈圖片編碼後鑲在網頁中〉中有 3 則留言

無意間發現 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

Tags:網頁設計

文章導覽

Previous Post: Delete a branch on Github
Next Post: XX 產生器

Comments (3) on “圖片編碼後鑲在網頁中”

  1. 日落 Zero表示:
    2011 年 5 月 8 日23:34

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

    回覆
  2. 星夜如雨表示:
    2011 年 5 月 9 日00:55

    php 的話

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

    shell 下 php decode.php > img.gif

    回覆
  3. 日落 Zero表示:
    2011 年 5 月 9 日03:18

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

    回覆

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

其他

關於我  (About me)

小額贊助

  文章 RSS Feed

  留言 RSS Feed

Apache AWS Bash C/C++ Docker FreeBSD Git Google Java JavaScript Laravel Linux Microsoft MSSQL MySQL Nginx PHP PHPUnit PostgreSQL Python Qt Ubuntu Unix Vim Web Windows WordPress XD 作業系統 分享 好站推薦 專題 小提琴 攝影 新奇搞笑 新聞 旅遊 生活雜記 程式設計 網路架站 網頁設計 資訊學習 資訊安全 遊戲 音樂


創用 CC 授權條款
本著作係採用創用 CC 姓名標示-相同方式分享 4.0 國際 授權條款授權.

Go to mobile version