我有一個坦白,會讓效能工程師畏縮。在 WP Adminify 的 WordPress 儀表板的早期版本中,我對每個圖示進行了 base64 編碼,並將它們直接內聯到 CSS 中,因為我厭倦了管理精靈表。它起作用了。這些圖示立即出現,沒有額外的請求,沒有丟失圖像的閃光。然後樣式表膨脹超過兆字節,頁面在第二次加載時感覺較慢,因為這些內聯圖像都無法單獨快取。那個專案是我學到這個專案的地方"圖像到 base64"是一種真正有用的技術,也很容易過度使用。
本指南涵蓋了該課程的兩半。我將展示如何使用 將圖像轉換為 base64 影像到 Base64 轉換器 在 toolz。dev 上,如何將 base64 解碼回影像、資料 URI 的真實情況以及誠實的權衡,以便您可以內聯受益的資產並留下不受益的資產。
TL;DR: 將影像轉換為 base64 會將其二進位內容轉換為文字字串,通常包裹在類似資料 URI 的資料中
data:image/png;base64,iVBORw0KG.... 此字串直接嵌入 HTML、CSS、SVG 或 JSON 中,沒有單獨的檔案請求。 toolz。dev 轉換器在兩個方向上進行編碼和解碼,完全在瀏覽器中運行,因此不會上傳任何圖像,並為您提供原始 base64、現成的資料 URI、an<img>標籤和 CSS 片段。 Base64 將大小放大了約三分之一,因此內聯圖示等小資產,而不是大照片。
到底是什麼 64 影像?
Base64是一種編碼方案,不是壓縮,也不是加密。該方案由 定義 RFC 4648,並且 data: URI 包裹著它 RFC 2397。 它使用 64 個可列印 ASCII 字元表示任意二進位資料:字母 A 到 Z 和 a 到 z,數字 0 到 9,加上 + 和 /,與 = 用於填充。該方案在 RFC 4648 中定義,該標準與管理您在電子郵件附件和 JSON 有效負載中看到的 base64 的標準相同。
它存在的原因是很多互聯網' s管道是為文字而不是原始位元組建構的。二進位資料可以包含面向文字的通道會破壞的位元組值。 Base64 透過採用三個位元組的輸入,將這 24 位元分成四組,每組 6 個,並將每組對應到 64 個字元之一來迴避這一點。三個位元組輸入,四個字元輸出。三比四的比率正是編碼輸出比來源大約 33% 的原因,這個數字值得記住,因為它決定了內聯是否是一個好主意。
A&引用;base64 image"只是一個透過該編碼運行的圖像檔案。就其本身而言,字串只是文字。使其可渲染的原因是將其包裝在資料 URI 中。
什麼是資料 URI?瀏覽器為何呈現它?
資料 URI 是一個內聯承載其有效負載而不是指向遠端資源的 URL。其形狀在 RFC 2397 中定義 data:[<media-type>][;base64],<data>。 對於看起來像的 PNG data:image/png;base64,iVBORw0KGgo....
重要的作品是媒體類型, image/png 在這個例子中。它告訴瀏覽器如何解釋後面的位元組。因為資料 URI 宣布了自己的 MIME 類型,因此瀏覽器可以處理 data:image/png;base64,... 作為圖片,它解析一個期望 URL 的屬性,無論該屬性是 src 的 <img> 或者 url() 在CSS中 background-image. 沒有發生網路往返,因為沒有什麼可取的東西。圖像已經在那裡,在標記中詳細說明。
這就是一句話的全部魔力和全部成本。圖像已經存在,這就是為什麼它會立即呈現,也是為什麼它不能像連結檔案那樣單獨快取或在頁面之間共享。
如何在 toolz。dev 上將映像轉換為 base64?
的 影像到 Base64 轉換器 有兩個方向,預設編碼。
選擇"圖像到 Base64"方向,然後上傳或刪除您的圖像。該工具使用瀏覽器檔案 API 在本機讀取文件,並且由於該讀取發生在您的瀏覽器中,因此圖像永遠不會傳輸到伺服器。載入後,您將獲得預覽版和四個輸出,每個輸出都有自己的複製按鈕。
原始 base64 是裸字串,當您已經擁有自己的包裝器時非常有用。資料 URI 已滿 data:... 字串準備貼上到 src 或者 url(). HTML <img> 標籤是您可以放入模板中的完整元素。 CSS background-image 聲明已準備好樣式表。除了這些之外,您還可以看到解碼的位元組大小和以 64 為基數的字元數,因此您可以在提交之前判斷權重。如果數字看起來令人震驚,那就是完成其工作的工具:一張 200 KB 的照片變成 HTML 中的 270 KB 字串正是重新考慮的時刻。
如何將 base64 解碼回影像?
切換到"Base64 到 Image"方向並貼上原始 base64 字串或完整的資料 URI。轉換器對輸入具有容忍性:它會剝離空白,如果您貼上完整的空白 data:image/png;base64,... 將其字串直接從前綴讀取 MIME 類型。如果您貼上沒有前綴的裸 base64,則會假定 PNG,這是大多數螢幕截圖和匯出資產的安全預設值。
它首先驗證字串。如果您貼上的內容不合理,base64(即它包含 RFC 4648 字母表之外的字元),該工具會告訴您而不是顯示損壞的影像。當輸入檢查出來時,您會得到即時預覽和下載按鈕,該按鈕可以重建原始二進位檔案並使用正確的擴充功能保存它。當您找到埋藏在樣式表或 API 回應中的資料 URI 並想查看其實際內容或將其提取回真實檔案時,此方向確實很方便。
這裡的一切都是客戶端的,這與從文字導向到工具箱其餘部分的承諾相同 Base64 轉換器 到 網址編碼器. 如果您想在瀏覽器中保留此類工作背後的更廣泛的推理,那麼 base64 編碼指南 更深入地了解編碼本身。
我什麼時候應該將圖像內聯為基數 64,什麼時候不應該內聯?
這是該工具存在用於通知的決定,因此這是我實際使用的表格。
| 情況 | 內聯為基數64? | 為什麼 |
|---|---|---|
| 全站範圍內使用的小圖示或標誌 | 通常是的 | 刪除請求,立即出現,開銷很小 |
| 微小的 SVG 或 1px 背景 | 是的 | 33% 的開銷在幾百位元組上可以忽略不計 |
| 單一檔案 HTML 匯出或電子郵件 | 是的 | 該文件必須是獨立的,不允許外部資產 |
| 大型英雄照片或橫幅 | 不 | 開銷很大,影像無法單獨快取 |
| 圖像在許多頁面上重複使用 | 不 | 連結的檔案快取一次並共用;內聯到處重複它 |
| 內容圖像經常改變 | 不 | 編輯器無法像檔案一樣輕鬆地交換 base64 blob |
表後面的模式很簡單。內聯交易文件中位元組的網路請求。當資產較小且儲存的請求很重要時,交易獲勝,這是折疊上方圖示的經典情況。當資產較大或共享時,它會遺失,因為您繳納了 33% 的稅,您會失去獨立的緩存,並且您會破壞瀏覽器必須解析的文件才能繪製任何內容。
對於"不"行,更好的方法通常是優化文件並正常服務。這就是工具喜歡的地方 圖像壓縮 或者 格式轉換器 賺取保留,縮小資產,使連結版本盡可能輕。我在 中寫了更多關於整個工作流程的資訊 web 開發人員工具包 指南。
base64 會保密我的形象嗎?
是和否,區別很重要。 Base64 是一種編碼,因此任何擁有該字串的人都可以將其解碼回精確的原始圖像。它提供零保密性。不要將資料 URI 視為隱藏任何內容的方式,因為 "Base64 到 Image"這個工具的方向就是一回事了。
私有的是轉換本身。在 toolz。dev 上,圖像完全在瀏覽器中使用檔案 API 進行讀取和編碼,並且不會上傳任何內容。因此,您正在編碼的藝術作品、螢幕截圖、客戶端徽標在此過程中永遠不會離開您的機器。這是與隱藏內容的編碼不同的保證,我試圖準確說明它,因為 "private"鬆散地拋出。隱私位於本地處理中,更廣泛地覆蓋在本地處理中 資料隱私 指南,而不是以 64 為基數作為方案。
運送過程中的一些實用技巧
如果可以的話,更喜歡 SVG 作為圖標,並直接內聯 SVG 標記,而不是以 64 為基數對其進行編碼。 SVG 已經是文本,因此將其包裝在 base64 中只會免費增加 33% 的稅。 Base64 非常適合真正二進位的 PNG 和 JPEG 等光柵格式。
觀看文件的總大小,而不僅僅是單一圖像。一個內聯圖示是不可見的。其中四十種,我在 WordPress 儀表板上犯的錯誤,將精益樣式表變成怪物。如果您內聯的內容超過少數,則表示您退後一步並考慮連結的精靈或圖示字體。
保持 MIME 類型誠實。如果您匯出 JPEG,但將其資料 URI 標記為 image/png,有些瀏覽器可以應對,有些則不能。轉換器會偵測檔案中的真實類型,因此輸出是正確的,但如果您在其他地方手動組裝資料 URI,請將媒體類型與實際位元組相符。
當您繼承充滿神秘資料 URI 的程式碼庫時,請記住解碼方向。將一個貼上到 "Base64 到 Image"側邊點擊下載是查看樣式表實際發送內容的最快方法。
base64 編碼實際上如何逐步運作?
它有助於一次查看機制,因為整個 33% 的開銷故事自然會從中掉出來。 Base64 一次處理三個位元組的群組。三個位元組是 24 位元。編碼器將這 24 位元分成四個區塊,每個區塊有 6 位元。 6 位元可以表示 64 個值,從 0 到 63,每個值對應到 64 基字母表中的一個字元:A 到 Z 表示 0 到 25,a 到 z 表示 26 到 51,數字 0 到 9 表示 52 到 61,然後 + 對於 62 和 / 63。
所以三個輸入位元組總是變成四個輸出字元。這就是尺寸增加的來源。四個字元攜帶三個位元組的信息,比例為4比3,這等於說輸出比輸入大三分之一。沒有辦法解決這個問題,因為它已經融入了方案的運作方式。
填充處理剩餘部分。如果您的資料不是三個位元組的乾淨倍數,編碼器會填充最後一組,以便它仍然產生整數個字符,並附加一兩個字符 = 記錄添加了多少填充的標誌。這就是為什麼 base64 字串如此頻繁地以 結尾 = 或者 ==. 單尾隨 = 意味著最後一組有兩個位元組;一個雙 == 意味著它持有一個。 toolz。dev 轉換器可以自動處理兩個方向的填充,並且在解碼時可以愉快地接受有或沒有尾隨的字串 =,因為有些系統會剝離它。
您可以透過一個小範例觀看此節目。字母 " 的三個 ASCII 位元組;人與報價;編碼四個字元&報價;TWFu",直接從編碼文獻中得出的著名範例。將這三個字元作為文字放入資料 URI 中,您可以看到往返,或透過工具運行真實影像,並注意到輸出中的字元數始終約為旁邊顯示的位元組數的三分之四。
了解這一點也可以解釋為什麼 base64 不適合大圖像,而非常適合小圖像。開銷是固定的百分比,因此在 300 位元組圖示上花費 100 位元組,沒人關心。在一張 2 MB 的照片上,您的文件中需要花費三分之二兆位元組的純文字膨脹,並且必須在頁面渲染之前下載並解析該文件。數學不會隨著大小而變化,但後果會改變。
常見問題
如何將影像轉換為 Base64?
選擇圖像到 Base64 方向,然後上傳或刪除圖像。該工具在本地讀取文件,對其進行編碼,然後傳回原始 Base64 以及即用型資料 URI、img 標籤和您可以複製的 CSS 片段。
什麼是資料 URI?
資料 URI 是一個字串,它內聯嵌入文件而不是連結到文件,形式為資料:[mime-type];base64,[資料]。對於 PNG,它看起來像 data:image/png;base64,iVBORw0KGgo。。瀏覽器在需要 URL 的地方將其呈現為圖像,因此不需要單獨的請求。
我可以將 Base64 轉換回影像嗎?
是的。切換到 Base64 到影像方向並貼上原始 Base64 字串或完整的資料 URI。該工具對其進行解碼,顯示預覽,並允許您下載重建的圖像檔案。
支援哪些影像格式?
均支援 PNG、JPG/JPEG、GIF、WebP、SVG、BMP、ICO 和 AVIF。從檔案中偵測到正確的 MIME 類型,以便產生的資料 URI 正確呈現。
為什麼 Base64 字串比我的影像大?
Base64 代表三個位元組的二進位數據,帶有四個文字字符,因此編碼輸出比來源大約 33%。這就是為什麼 Base64 比大照片更適合小圖示和標誌。
在這裡轉換影像安全嗎?
是的。每個圖像都使用檔案 API 完全在瀏覽器中讀取和編碼。沒有檔案、字串或結果上傳到伺服器,因此私人圖像保留在您的裝置上。
我應該在生產中將影像內聯為 Base64 嗎?
內聯非常適合圖示等小型常用資產,因為它可以刪除 HTTP 請求並避免閃爍遺失的影像。對於大圖像,通常最好保留單獨的文件,以便瀏覽器可以獨立快取它們。
轉換器離線和行動裝置上是否運作?
是的。由於所有處理都是客戶端處理,因此即使沒有連接,頁面載入後也可以運行,並且介面在現代桌面和行動瀏覽器中響應靈敏。
