CSS Data URI 轉換器：自動將 CSS 圖片內嵌為 Base64

CSS Data URI 轉換器

貼上樣式表、選擇檔案，或輸入遠端 CSS 檔案的網址。轉換器會找出每個 url(...) 參照，下載小於大小上限的資源，並以 Base64 Data URI 取代。

CSS

…或載入 CSS 檔案

…或輸入樣式表網址

相對路徑的基準網址

單檔大小上限（KB）

何時適合內嵌 CSS 圖片

每張外部圖片都需要一次請求。對於小圖示，將其內嵌為 Base64 Data URI 可省去該請求並避免閃爍。超過幾 KB 後，33% 的大小增加與失去快取的代價就會大於好處，因此轉換器設有大小上限。以 gzip 或 Brotli 傳送結果，可彌補大部分的 Base64 額外負擔。

每張 CSS 圖片都該內嵌嗎？

不。只建議內嵌小圖示和背景。大型圖片會讓 CSS 膨脹、阻擋顯示，且無法單獨快取。

對「CSS Data URI 轉換器」有問題、想法或發現錯誤嗎？歡迎留言、為工具評分或回覆他人。

目前還沒有留言，歡迎搶先分享您的意見！