CSS 利用 DataURI 來節省流量

一個我現在才知道的操作。

簡述

簡單來說就是把圖片用 base64 編碼後寫在 HTML 裡,這樣就不需要發 request。

result-01

雖然看起來好像還是有發 request,但可以注意到 Time 為 0,所以這應該不算。

可以參考下圖做個對照:

result-02

上面是 base64 的 URI,下面是用一般的 URI。

用法

格式的部分很簡單,只要這樣寫就好:

data:[<MIME類型>][;charset=<charset>][;編碼方法],<編碼資料>

MIME 類型可以參考這裡:MIME types: Complete list of MIME types

因為只是把要引入的東西換掉而已,所以 srcbackground-image 都能用:

1
<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUh略…(很長一串)” />`
1
2
3
.element {
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUh略…’);
}

至於怎麼做 base64 編碼?Google 一下應該就能找到線上編碼服務,不過我是習慣直接用 CLI 比較快:

1
cat button.png | base64

實作

這邊我懶,所以就拿 CSS 利用 Sprite 來提升效能 的範例來改:

1
2
3
4
5
6
7
8
9
button {
width: 51px;
height: 51px;
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAJoAAAAzCAIAAADgjoZmAAAEiklEQVR4nO2caUwVVxTH/4hgxAJaxYWiz/AIilbLHi01LoCNJV1j2zRETRupGI1GP/RDbWPS6gf7xbSxTU262KAYo42J3WyDicYmQrGySnCBqkCLyA4PZPccJNX3eESZO86Qm/MLTN4smXve/Oaee+4lAQOCRvjQ75KDGIPkboIENioosPF2xyCYiejUCtGpFaJTK0SnVohOrRCdWiE6tUJ0aoXo1ArRqRWiUytEp1aITq0QnVohOrVCdGqF6NQKc3SO80FsKOKfQWgg795uR1Et8qrQ02/K7YXHxQSdi2bgoxVwTHY7uG5Q6t5z+KtavYVRszEO6dGYOOzLdfaishHHSvDHdRui8mD6JGxbiusNOFRg2j1VdT4/B/tWw8+XtdFjulLPPXXxTGTEs+D9a7ArB2f/MSXUUfBuLHzHoaMHhf+h96EMERaMhdPxSTKaOpFfY3VUHmxfimQnUpworOU4TUFJ59QAfJrMLrOL8cWFB8dzKnD+Jj5cjhcj8H6CDTrJ5QD10ZOobPI8tXsl1kQiyWGzzsipWOVEXz+HmpmAzFPm3FZJ5zuLMckf5XdwINfzVFcvdp/hLtvWpdKCcVzdXlwSF2tYZ/+A5QG5k5kIH+CzP/HWs4iehSWzkVtlwm2VdC5z8PZ46YhP55crKrc3HxoIVobzhwKTkpsxaDCiQaq2nZ8PjQiU4TYljAGdYUG8La0zIQ7Tecofe1PcBk5ifghCg/BlHs7fsCeq+2xO5O3hQg7vTAXXGVEhWD4X55SjUtJJeZ/o7FEN4glBhcZw6l3w90WAH3cLW0gMQ8ws1HfgVDnvUmL7oQAfr+AigwoOxVFASSfV/TQZCJyAOpdSEE+Cu71I/d5z4jstAG8v4t5As+QtP9kTWOZg18wuQnff0JHT13hm5XwaqU78rjaDUtJ5o4mzBD2aikbvF1DpS33Xln5AeWz4Igb1ia/ysDoCcaGYHYyqFqujooy6IAQtd3Gy7MFBqm+zCvHBMmyMR04l7xpGSSfNQEhn+nM4fRVt3Z5nX3Dw6FVyG1t/VmnEZCiZuQZfr6AJVjdNhRhlVKKrDzuS3E7dD4besLTIoSRsDCWdJy7j1She2DvwMvacxbWGoeM0e1kXjfXR/AVIpy1QDHOCcWtY/6OSMnwKD1HVrVaHlBrBGRWD60GvzPd+zXux+O2q8cVRJZ00t9vxK/a/hHnTkLUWN5tR08ovGu36+fIj++ZvfHtRpQWDUNP0Jn33Bopr3YrbKRN5VYigHkAZz0qobMyI4w9f5+PQJS8XUAly5E3MDMRrC3juZwzVRT5SmH4cr0fxfI5ePcdkfpR3XLj0Ly8V/d9fLeZYCdYu5LkK9cWH6enDrWYuPbKKrA4pJZyXGBs7cbTY+wVtXTx12ZmEDTE4UQpjFa4JS/BU7JC57BGitIXPL/DPmKKqFQ0dOJjP62UjQTkjbR5nOMOzFfl7p0WU1SEt6xHX0ORqw49KrYhOrRCdWiE6tUJ0aoXo1ArRqRWiUytEp1aITq0QnVohOrVCdGqF6NQK0akXdv9/ZMFM7gEDz+rb9FQSCQAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-color: transparent;
border: none;
padding: 0;
}

輸出結果:

result-03

確認一樣是可以 work 的!

DataURI 的缺點

  1. 不會 cache(但我不太確定為什麼 devtool 還是會顯示 memory cache)
  2. HTML 容量會變肥
  3. 轉成 base64 後有字數限制(以 Opera11 來舉例的話是 65000 個字左右)
mentor-program-day82 CSS 利用 Signature 來讓導覽列更好寫
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×