圖片 ↔ Base64 用於在圖片文件和文本編碼之間互轉。編碼方向：選中一張圖後同時給出四種輸出——完整 Data URL（data:image/png;base64,…，可直接用於 src 或 url()）、去掉前綴的純 Base64、background-image: url('…'); CSS 片段、<img src=… alt=文件名 /> HTML 片段，每種都有獨立複製按鈕，卡片標題顯示編碼後體積及增幅。解碼方向：粘貼 Data URL 或純 Base64，按文件頭嗅探 PNG / JPEG / GIF / WebP / BMP / SVG 後預覽並下載。處理在瀏覽器本地完成。

與通用「Base64 編解碼」的區別：這裏針對圖片，會補 MIME 前綴、生成可直接粘貼的 CSS / HTML，並能把文本還原成可看的圖。

1. 01選方向頂部切換「圖片 → Base64」或「Base64 → 圖片」。
2. 02編碼添加一張或多張圖，文件列表點「查看」切換；「編碼結果」裏四個文本框超過 1500 字符只顯示前段並註明總長度，複製按鈕拿到的是完整內容。
3. 03解碼在「粘貼 Base64」文本框粘入 data:image/...;base64, 開頭的字符串或純 Base64（空白與換行會被清掉），點「解碼預覽」。
4. 04保存解碼成功後顯示 MIME 與大小，點「下載圖片」得到 base64图片.png 等對應擴展名文件。

Base64 體積約為原文件 1.33 倍

無前綴時按文件頭判斷格式

12 KB 的 PNG 圖標

Data URL 約 16 KB（+33%）；CSS 片段 `background-image: url('data:image/png;base64,iVBOR…');`

粘貼以 `iVBORw0KGgo` 開頭的純 Base64

嗅探為 image/png，顯示預覽，下載為 `.png`

粘貼被截斷一半的字符串

「解碼失敗：不是有效的 Base64 內容，請檢查是否完整」

支持輸入

JPG / PNG / WebP / GIF / BMP / AVIF / HEIC / SVG；HEIC 會先轉成 JPEG 再編碼，得到的不是原 HEIC 字節

大文件

超過 3 MB 會提示字符串將非常長；瀏覽器文本框對幾十 MB 的字符串會明顯卡頓

嗅探範圍

解碼時能識別 PNG、JPEG、GIF、WebP、BMP、SVG，其它格式一律按 PNG 處理

SVG

編碼為 data:image/svg+xml;base64,…，不做 URL 編碼形式的內聯

不做什麼

不壓縮或改格式（先用「圖片壓縮」「圖片格式轉換」）、不處理非圖片文件的 Base64（用「Base64 編解碼」）

編碼與解碼都在瀏覽器本地通過 FileReader 和 atob 完成，圖片與 Base64 文本不會上傳到任何服務器。