圖片轉Base64轉換工具
將任意圖片檔案轉換為Base64資料URL。將結果直接貼到CSS、HTML或JSON中。
如何使用本工具
- 1
Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).
- 2
Wait a moment while the browser reads the file and renders a preview thumbnail.
- 3
Review the generated data URL in the text box below the preview.
- 4
Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.
什麼是圖片轉Base64轉換工具？
Base64資料URL會將圖片的二進位內容直接嵌入HTML或CSS中。這樣就省去了針對小圖示和小圖形的HTTP請求，從而可以改善感知載入時間。代價在於：Base64編碼會使檔案體積膨脹約33%，因此它最適合小於5KB的圖示。
常見使用場景
Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.
Embed a logo in a single self-contained HTML email or offline page with no external files.
Paste image data into a JSON payload or API request that only accepts text fields.
Store a tiny placeholder image as a string in a config file or environment variable.
Drop an avatar or sprite straight into a React or Vue component without a separate asset import.
Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.