iT邦幫忙

DAY 9
1

前端小字典三十天【每日一字】系列 第 9

Day9– 前端小字典三十天【每日一字】– Base64

Base64是什麼?

圖片來源

Base64是一種表示二進制資料的方法。

圖片來源

我們可以透過Base64來處理文字資料用來顯示、傳輸、儲存一些二進制資料。

例如:
gif/png/jpg圖片可以使用base64進行編碼,web font 可以使用base64進行編碼。

Base64可以拿來做什麼?

有時候網站內的圖片需要一些載入時間,可能會影響網站頁面顯示的速度,
假如你想讓使用者能從你的網站獲得更好的瀏覽體驗,
那麼圖片優化是你必須注意的項目。
因為瀏覽器每下載一個圖片或檔案就會觸發一次HTTP request,
而每次request都會額外產生HTTP Header、TCP/IP Header等資料。
為了解決這個問題,你可以透過data URI scheme將圖片轉成 Base64 編碼字串,將Base64編碼內嵌在網頁裏,就不會額外觸發HTTP request。

Data URI 是什麼?

Data URI 是一種檔案格式,可以把編碼崁到網頁裡,不需要透過外部的檔案儲存。

格式如下:

data:[<mime type>][;base64],<data>

圖片來源

我們可以透過一些網站的工具(例如:base64 image )將圖片轉成Base64 編碼字串

將圖片轉成 Base64 編碼字串,透過data URI scheme直接寫進 HTML 或 CSS 中。

例如:

<style type="text/css">
div.image {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEJklEQVQ4Ea1UW2xUVRRd9zXTefQ5bZHSYKUOg3WIDZE6LbFCqEowFDVggqKS6I/G+OGXUUz0w8iXIgpNhDQG5ceg0JZRDBqI2jJtU61UW8uElNLSQplOh+m00+l9HPe+01GJ+OdO1r377sc6+5y9zwX+Z5H+iy9QhOCWO/HEAytRX1mqVnLceMwY776C86dHcWI4gd9ul/svwpI8lL+5Hvv2NJc+m1+7SVVWboDkqbBzxdwEzCudmO0/a3zaHvvs3V68Hl/A1O2I2SbdVYA13S/IUf3rJiFip4SY6xciGRFi5ocsWGcb+TiGYzmHc3OkOUUqdqL8zHNypPaZLVXK2peBzCxgzQNC5GKzb4lSZDfgzIc5cAj9x05ffvioFZrJ2JUKZSlaea9RamnetapRDe4C0hOATjuxiNQk6EnA4AVSWZs+TQtOQ/YFUO6KFrmuJZZ/exltxGUTyv4i1La86Drguq9OgqxRMJFpaWCRiBSqMkNvk8hU0nO2dJxsC5BdMmocY8Eve4x2Os/rMrEq26qlp92VXhmSAcyPUGIMg92/4vndn+BcRyd9X7fBOtvYxzF2rGKAc5mDuVR6qPXVakgpcNDq1+iTKoSFk8d/R4XHQrjtAjbeT9slCbeN2LaTx/tQs+ZeYIHr0cG5zIE+XWWLVuFTyqExISUuxiDicRSv8OLtD4IIrCtFKmHZYP0dsrGPYzjWbp7DAZuDuLjLJZ0vOSKh7WV+2Uk9cpiAlzrroOIti0C2DNlY2C+TznXM0/GkKF1XYJE/0n4juqFlMcRbFlfjZgx6yg8XsPetOfh8BgJ3A8vuAIpKgDyy0ykgTX1KUGGTk8DgH8Rlatj7hgeYFSCOG8zFhHpkxLrweEavl70GdHch5IeOIu5OYyw2CvPSFCxjPju5mgeaexncNVVAqQGzZw/gmYc5poE4BpiLAM1fjObkQacpBrziu/0QOxvrxKGD74sfe38Rk0lT6EKIDGE8nhFnu7rFgf37xJMNa0X3YRr7fq9IfuQ0mYO5uEIjOoO+1g49/Ooqbdvm7V6MDvVg5HAPJr4AvqLjsrh1JHx81HiIBLCzCah7hJpDdbWG9TBzUIiRu3oO+ik0fP+K+nntDtcK0L/lm2M6UkMGCvJMWjZ7/XRdRjIjo7hWRdNTNF40sv0n0lc3f2zspqHuIsLF3NWz0gZunhm0og+6rNDyMqXQv0mDu0rFTUVBmsZVL9TgqtYQ3OrAugba2LCFnzsWxnYcMV6bSOE8kdE1ulW42jKfC49+uFU+NdvqNESXR4hLBUKMLYH1nzxi9ojT4BiO5RxCbqd/K0vc7MgnVAZ8WP/YamljaLV8T2W5VMr+8SkRi1y0hsIXxbnhafSyicDXKHsmpPzFTPo/hdtQRCgm0KCBrpEti/ScI8wQqDU8nbfKny8J3bgvSgspAAAAAElFTkSuQmCC');
}
</style>

看到上面的css碼內的Base64 編碼字串,有沒有覺得超大一串...
Base64 編碼字串就是

開頭為 iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAY........的字串

所以使用data URI scheme將圖片轉成 Base64 編碼字串,雖然可以減少HTTP request呼叫次數,但還是有一些缺點。

使用data URI scheme的缺點?

1. Base64會使文件內容增加約33%
2. data URI不會被瀏覽器快取
3. 如果圖檔需要更新,必須重新產生一次Base64 編碼字串。
4. Base64 編碼字串很冗長,一般人在觀看時也無法理解編碼內容,
所以加入data URI會使CSS或HTML會看起來凌亂。
5. data URI有字元的限制,IE8僅支援32768 Bytes。

使用data URI scheme的時機?

1. 檔案較小的圖檔
2. 比較不常變動的圖檔
3. 訪客使用IE瀏覽器比例較低,否則需要特別注意Base64編碼的大小需要小於32768 Bytes(約32KB)

小結:

在適當的時機透過data URI scheme將圖片轉成 Base64 編碼字串,可以減少HTTP request,優化讀取網站的效能。

參考資料

[技術文章] 駭客級的網站優化技巧:data URI scheme
http://www.awooseo.com/tec-01-datauris-html/

[優化]圖片轉成 Base64 編碼字串,降低連線請求
http://sofree.cc/base64-images/

使用 DATA URI 將圖片以 Base64 編碼並內崁至網頁中,加速載入速度
http://www.gtwang.org/2013/09/minimizing-http-request-using-data-uri.html

Data URI data:image/png;base64图片优缺点转成Binary代码插入嵌入网页
http://blog.shouji-zhushou.com/datauridataimagepngbase64%E5%9B%BE%E7%89%87%E4%BC%98%E7%BC%BA%E7%82%B9/

base64:URL背景圖片與web頁面性能優化
http://big5.china-code.net/ap-cc20120607025844-459941.html

[CSS] Data URI使用心得筆記
http://blog.rx836.tw/blog/data-uri-web-desing/

base64:URL背景圖片與web頁面性能優化
http://fanli7.net/a/bianchengyuyan/JS-HTML-WEB/20120927/230830.html


上一篇
Day8– 前端小字典三十天【每日一字】– Template Engine
下一篇
Day10– 前端小字典三十天【每日一字】– CSS Sprites
系列文
前端小字典三十天【每日一字】30

尚未有邦友留言

立即登入留言