圖片轉Base64
選擇一個圖片檔案將其轉換為Base64編碼字串。切換資料URI前綴以取得可直接使用的CSS/HTML輸出。所有處理均在您的瀏覽器中完成。
關於圖片轉 Base64
此工具完全在您的瀏覽器中將圖片轉換為 Base64 編碼字串。不會將任何資料上傳到任何伺服器。
- Data URI：啟用前綴後，輸出可直接用於 CSS
background-image或 HTML<img src="...">。 - 原始 Base64：不含前綴時，您將獲得原始編碼字串。
- 支援 JPEG、PNG、GIF、WebP、SVG 及其他瀏覽器支援的圖片格式。
把圖片以 data URI 內嵌，能省掉一次請求，同時讓它的體積增大約三分之一，因為 base64 每三個位元組要用四個字元。這筆交換對又小又總要用到的東西划算，對照片就不划算。內嵌的圖片還沒法單獨快取，所以承載它的那個檔案每被下載一次，它就跟著重新下載一次。
標記老是跟你作對？
被跳脫的實體、壞掉的編碼，以及在 CMS 裡是一個樣、在頁面上又是另一個樣的內容，通常說明流程中有一環在靠猜。我們做前端，也做它背後的發布鏈路，讓訪客看到的就是你寫下的。
聊聊你的網站常見問題
什麼時候用 data URI 才划算？
用在馬上就需要的小圖上：一個圖示、一個佔位區塊、一封 HTML 郵件裡的 logo（外部圖片預設被擋）。經驗法則是幾 KB；超過之後，多出來的體積就蓋過省下的那次請求了。
為什麼編碼之後反而更大？
base64 用四個字元表示三個位元組，所以還沒算前綴，結果就已經大了三分之一。傳輸時壓縮能找回一部分，但瀏覽器在文件裡拿著的仍是那個更大的形態。
會不會影響快取？
會，而這正是大家容易漏掉的一點。單獨的圖片檔快取一次就能一直重用；內嵌的圖片是樣式表或頁面的一部分，那個檔案一變，它就得重新下載。跨很多頁面用的東西，普通圖片更划算。
哪些格式可以內嵌？
哪種都行，因為 base64 不在乎內容是什麼。有意思的是 SVG：它本來就是文字，所以做成 data URI 往往比直接把 SVG 寫進去還大。
我的圖片會被上傳嗎？
不會。檔案由你的瀏覽器讀取並在頁面裡編碼，從頭到尾沒有離開你的機器。當那張圖是某個內部畫面的截圖時，也就是多數時候，這一點就很要緊。