在 Mac 上將影像轉成 Base64
將影像轉成 Base64 data URI，可直接貼到 HTML、CSS 或 JSON 中。
在 Mac 上使用「影像轉 Base64」
App 的截圖，使用範例檔案。
如何使用「影像轉 Base64」
- 1
拖入你的影像
加入一張或多張影像，包括 SVG。
- 2
選擇要拷貝的內容
data URI、CSS background 規則、HTML <img> 標籤，或純 Base64。
- 3
按一下「編碼」
每張影像都會逐位元組原樣編碼。
- 4
貼上
開啟「拷貝到剪貼板」後，結果可立即貼上。每張影像的文字也會儲存為名稱含「base64」的檔案，放在「下載項目 › OneMacTools」中以日期命名的資料夾。
「影像轉 Base64」的功能
為每張影像取得 data URI、CSS 背景規則、HTML <img> 標籤或純 Base64，拷貝到剪貼板並儲存為文字。位元組會原封不動地編碼，品質毫無損失。由於 data URI 適合小影像，遇到大影像時會提醒你。
適合用於
- 在 CSS 中內嵌小圖示
- 在 HTML 電子郵件中內嵌影像
- 將影像放進 JSON 或設定檔
選項說明
- 拷貝為
- Data URI、CSS 背景、HTML <img> 或純 Base64。Data URI 是通用格式；CSS 背景會將其包在 background-image 規則中；HTML <img> 會將其包在影像標籤中，並以檔名作為替代文字；純 Base64 則只有編碼後的資料。
- 拷貝到剪貼板
- 預設開啟。拷貝結果，讓你可以立即貼上。有多張影像時會一起拷貝，並以空白行分隔。
最佳做法
- data URI 只適合小圖片，最好在 10 KB 左右以下。太大的圖片會讓 HTML 或 CSS 變得臃腫，也無法單獨快取。
- 先縮小影像：編碼前先用「SVG 最佳化」處理 SVG，用「壓縮 PNG」處理 PNG。
- SVG 很適合在 CSS 中作為圖示的 data URI，因為檔案小，而且在任何尺寸下都保持清晰。
- 在 HTML <img> 輸出中編輯替代文字來描述影像，而不是只留下檔名。
- 請使用瀏覽器支援的格式，例如 PNG、JPEG、WebP 或 SVG。HEIC 的 data URI 在大多數瀏覽器中無法顯示。
搭配使用
- 輸入
- PNG、JPEG、GIF、WebP、SVG 和其他影像檔案。
- 輸出
- 每張影像一個包含編碼結果的文字檔；開啟該選項時，也會拷貝到剪貼板。
- 影像不會重新壓縮，因此不會損失畫質。
- Base64 大約比原始檔案大三分之一。結果很大時，App 會提醒你。
- 很長的結果不會顯示在 App 中，但儲存的檔案和剪貼板中的內容是完整的。
關於「影像轉 Base64」的問題
如何在 Mac 上將影像轉成 Base64？
將影像拖到「影像轉 Base64」上，選擇 Data URI 並點按「編碼」。結果會拷貝到剪貼板並儲存為文字檔。
如何在 CSS 中使用 Base64 影像？
選擇「CSS background」。你會得到一條包含 data URI 的完整 background-image 規則，可直接貼到樣式表中。
如何不用另外的檔案就在 HTML 中嵌入影像？
選擇「HTML <img>」。你會得到一個 src 中包含圖片的 image 標籤，在任何支援 HTML 的地方都能使用。
為什麼 Base64 文字比圖片還大？
Base64 會將每 3 個位元組轉成 4 個文字字元，所以大約會大三分之一。這就是它適合小型影像的原因。
轉成 Base64 會降低品質嗎？
不會。檔案的位元組會完全照原樣編碼，所以解碼後會得到一模一樣的影像。
可以將 SVG 轉成 data URI 嗎？
可以。SVG 檔案可以使用，並會以 image/svg+xml 類型編碼，可直接用於 CSS 或 HTML。
「影像轉 Base64」會上傳我的檔案嗎？
不會。「影像轉 Base64」完全在你的 Mac 上執行，檔案絕不會離開你的 Mac，也能離線使用。
「影像轉 Base64」會更改我的原始檔案嗎？
不會。結果會另存為新檔案，放在「下載項目 › OneMacTools」中以日期命名的資料夾；除非你開啟了另有說明的選項，否則原始檔案會完全保持原樣。
「影像轉 Base64」需要什麼？
只需要一台搭載 macOS 26 或以上版本的 Mac。不需另外安裝任何東西。
接下來這樣做
清除 Figma、Illustrator 和 Inkscape SVG 中的編輯器殘留內容並四捨五入座標，檔案更小，外觀不變。
壓縮 PNG透過減少顏色將 PNG 縮小 60–80%，並保留透明度 — 非常適合截圖、標誌和圖示。
預留位置影像產生器產生 BlurHash 字串、模糊小縮圖和平均顏色，在影像延遲載入時顯示。
