Data URI 是一種檔案格式，資料全部都是經過 base64 編碼之後，以文字的方式來儲存的，不需要花費資源去載入檔案。
表達式定義
1 | data:[<mediatype>][;base64],<encoded data> |
ex:
1 | <a href="data:text/plain;charset=utf-8,123456" download="test1">download</a> |
若沒有<mediatype>，默認為text/plain;charset=US-ASCII
但沒有指定charset呢? 個人實測
有中文還是要加charset=utf-8
Mediatype
全名是Internet media type(網際網路媒體類型)，也稱為MIME type或Content type
格式
type / subtype [ ; 可選參數]
常用的已註冊的type包括application、multipart、text、image
sdbtype通常是根據type細分的檔案類型、後面還會加上其他資訊，詳細的維基有
常見範例
- application/json
- application/pdf
- application/zip
- audio/mp4
- image/jpeg
- image/svg+xml
- text/csv
- text/html
- text/plain: 純文字內容
編碼
以下是舉例常見的編碼
base64 6個bits組成，共可表示64個字，索引表詳見維基
1
<a href="data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" download>download</a>
下載下來為text檔，內容為
Hello, World!ASCII 8個bits組成(1bytes)，共可表示127個字
1
<a href="data:text/plain;charset=US-ASCII,123456" download="test1">download</a
*ASCII是美國那邊的標準，所以主要表示英文及特殊符號
UTF 1-8個bytes不等，常見英文1byte，漢字通常3bytes，例如
國是E5 9D 8D1
data:text/plain;charset=utf-8
補充:
- 不同語言文本打開會出現編碼的原因: 用A方式把文把編碼成二進制，然後用B方式解碼，就會產生亂碼
Data URL圖片應用
1 | <img src="data:image/png;base64,圖片base64碼"> |
優點
直接寫在html/css裡面，減少http請求
缺點
- base64編碼的大小比原資源還大4/3左右，也就是Data URL生成的圖片比Binary還大
- Data URL圖片不會被瀏覽器存在cache，所以每次訪問網站都要下載一遍
- 開發端不利於維護，程式碼太過冗長，但有套件可以優化
線上圖片轉換Data URL
https://onlinetools.com/image/convert-image-to-data-uri