Base64
Image Data URL
⚠️ Large image may freez the browser
編碼 PNG 為 Base64 以供 CSS 使用
將PNG圖像轉換為Base64或DataURL格式。直接嵌入到CSS或JavaScript中，無需外部文件。較大的文件可能影響性能；較小的尺寸建議使用。Base64編碼簡化與網頁資產的整合，降低對外部資源的依賴。DataURL格式簡化了動態內容交付的程式碼結構。
Image → Base64 / Data URL
Click or Drag & Drop an Image
將圖片轉換為 Base64 編碼
1
上傳 PNG 圖像
請點擊或拖曳檔案上傳區，上傳您的PNG圖片。
2
選擇編碼格式
選擇「Base64」或「DataURL」選項以選擇您想要的編碼格式。
3
查看Base64資料
您的圖片的Base64或DataURL表示形式將出現在下方標籤頁下方的文字區域中。
4
複製編碼文本
點擊「複製」按鈕將編碼的文字複製到您的剪貼板，以便在您的 CSS 或 JavaScript 中使用。
在你的CSS中直接嵌入PNG圖片
包括在CSS中直接嵌入小图像，而无需管理单独的文件，可以通过将PNG转换为Base64或DataURL格式来实现。encode-png-to-base64-for-css工具可以简化您的Web开发工作流程并减少HTTP请求。这会产生更干净、更高效的代码以及更快的页面加载时间。
縮小檔案大小及減少HTTP請求
這個工具減少您的網站需要載入的文件數量，通過將PNG圖像轉換為Base64或DataURL格式。將圖像直接嵌入到您的CSS或JavaScript中會減少HTTP請求，從而可以提高頁面載入速度。這種方法通過最小化外部文件依賴來優化網站性能。
常見問題
Base64 DataURL是什麼，我為什麼要用它？
Base64 DataURL 是一種將圖像表示為字符字符串的方式。它允許您直接將圖像嵌入到 CSS 或 JavaScript 程式碼中，避免從外部文件中導入它們。這對於小的圖標或圖像來說很有用。
我該如何使用生成的Base64或DataURL？
只需將提供的程式碼複製並貼到您的 CSS 或 JavaScript 中。例如，在 CSS 中，您可以這樣使用： background-image: url('data:image/png;base64,...');
這個工具支援哪些圖像格式？
這個工具專門為PNG圖片設計。其他格式可能無法正確轉換。
為什麼大型圖片不建議使用？
大型圖像會產生非常長的Base64字串，這可能會降低電腦效能並增加頁面載入時間。最好使用這個工具處理較小的圖像。
我能上傳圖片的最大尺寸是多少？
雖然沒有嚴格的文件大小限制，但更大的圖像會降低效能。建議使用較小的PNG檔案以獲得最佳效果。