🔗 圖片轉 Base64

使用步驟

1. 選一張圖 小圖示最適合 — logo、icon、簡單的背景圖案。照片轉出來的字串會長到幾乎無法使用。
2. 保持「先重新編碼縮小」開啟 Base64 會讓資料膨脹大約 33%（每 3 個位元組變成 4 個字元）。所以先縮到你實際會用到的尺寸、壓一下再編碼，幾乎一定划算。預設寬度 256px、WebP 格式對圖示來說很夠。
3. 選輸出形式 Data URI 是純字串，你自己決定怎麼用。HTML img 直接給你一個含寬高的標籤。CSS background 給你一段可以貼進樣式表的規則。
4. 按開始處理 下面會顯示完整的字串與它的長度。長度是重點 — 那個數字直接代表它會讓你的 HTML 或 CSS 檔案增加多少。
5. 複製，或下載成 .txt 按「複製」就進剪貼簿。字串很長的時候，下載的 .txt 檔比在瀏覽器裡全選好用得多。

什麼時候用得到

Base64 是什麼

圖片是二進位資料，而 HTML、CSS、JSON 這些地方只能放文字。Base64 是一種把任意二進位資料轉成純文字的編碼方式 — 它用 64 個安全的可列印字元（A–Z、a–z、0–9、+、/）來表示原始的位元組。

代價是體積會膨脹約 33%：每 3 個位元組必須用 4 個字元表示。這不是實作上的浪費，是這種編碼的數學下限。

什麼時候值得內嵌

簡單的判斷標準：圖片小到 HTTP 請求的成本比圖片本身還大時，才值得。實務上大概是 5KB 以下的小圖示。

超過這個範圍，內嵌的壞處就開始超過好處，主要是快取的問題。獨立的圖片檔只會被下載一次，之後每一頁都直接從快取拿；內嵌的圖片是 HTML 或 CSS 檔的一部分，那個檔案每次載入都要完整重傳一次。一個網站如果內嵌了 500KB 的圖片，訪客每看一頁就多傳 665KB 的文字。

HTTP/2 之後的變化

Data URI 流行的年代，瀏覽器對同一個網域的同時連線數有嚴格限制（通常是 6 個），所以「減少請求數」是很實在的優化。HTTP/2 之後多個請求可以在同一條連線上平行進行，這個好處大幅縮水。

現在比較合理的用法是：只內嵌那些極小、每一頁都會用到、而且不太會改的圖示。其餘的維持獨立檔案，讓快取發揮作用。

常見問題

接下來可能會用到

圖片處理很少一步到位。這幾個是跟「圖片轉 Base64」最常搭著用的：

• 🎯 壓到指定大小 — 填 2MB 就壓到 2MB 以下
• ⚡ PNG 轉 WebP — 檔案再小三成以上
• 🌈 圖片取色盤 — 抓出主色，附 HEX 與 CSS

處理完想直接分享？上傳媒體可以把圖片、照片或影片轉成一組短網址，還能設密碼、有效期限與瀏覽次數上限。也可以回到工具總覽看全部 12 個工具。