如果弄個社群的平台,一定會使用到很多種小圖示,但在開啟網頁時,http request的數量是很驚人的,為了提高網頁的開啟速度,可以使用Data URI Scheme的方式來存取圖片。

Data URI Scheme就是將圖片使用base64編碼轉換成字串,再將字串直接嵌在CSS或HTML中(至於base64 encode網路上有許多現成網站)

使用方法
HTML:

<!-- 請依照圖片類型更換MIME-type -->
<img alt="test" src="data:image/jpg;base64,base64的字串" />

CSS:

/* 注意:base64字串不能斷行 */
background:url(data:image/png;base64,base64的字串);

不過這只能適用於小圖示,若把其他一般圖片也用Data URI Scheme嵌到網頁上的到,會造成CSS檔或HTML檔過於肥大

Categories: WebDesign