HTML圖片可以用Data URL來減少HTTP Request讀取,加快速度

網頁上的圖片除了可以先上傳至空間後,再以<img src="圖檔名稱"> 載入之外,還有另一種方式。
叫做 data url scheme,就是將圖片內容以base 64編碼之後,將編碼後的字串直接嵌入HTML內
,可以減少HTTP Request 及下載圖檔的時間,不過它並不會被瀏覽器緩存,所以如果同一頁面中,
嵌入太多一樣的編碼字串時,反而會造成系統額外的負擔。

這個網站可以線上轉換圖片為Base64編碼字串

而語法範例就如下面,可以用在HTML內、也可以用在CSS,
「A3IBFwaCGA0DOq..略」就是Base64編碼後的字串,這字串其實很大,會大幅增加網頁檔的大小

HTML:
        <img src="data:image/png;base64, A3IBFwaCGA0DOq...略" />

CSS:
        <link href='data:text/css;base64, A3IBFwaCGA0DOq...略' rel="stylesheet" type="text/css" />

注:IE8以下並未支援

Windows 11安裝時跳過網路連線