一個我現在才知道的操作。
簡述
簡單來說就是把圖片用 base64
編碼後寫在 HTML 裡,這樣就不需要發 request。
雖然看起來好像還是有發 request,但可以注意到 Time
為 0,所以這應該不算。
可以參考下圖做個對照:
上面是 base64 的 URI,下面是用一般的 URI。
用法
格式的部分很簡單,只要這樣寫就好:
data:[<MIME類型>][;charset=<charset>][;編碼方法],<編碼資料>
MIME 類型可以參考這裡:MIME types: Complete list of MIME types
因為只是把要引入的東西換掉而已,所以 src
跟 background-image
都能用:
1
| <img src=”data:image/png;base64,iVBORw0KGgoAAAANSUh略…(很長一串)” />`
|
1 2 3
| .element { background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUh略…’); }
|
至於怎麼做 base64 編碼?Google 一下應該就能找到線上編碼服務,不過我是習慣直接用 CLI 比較快:
實作
這邊我懶,所以就拿 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; }
|
輸出結果:
確認一樣是可以 work 的!
DataURI 的缺點
- 不會 cache(但我不太確定為什麼 devtool 還是會顯示 memory cache)
- HTML 容量會變肥
- 轉成 base64 後有字數限制(以 Opera11 來舉例的話是 65000 個字左右)