當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

浅析data:image/png;base64的应用

發布時間：2025/5/22 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了浅析data:image/png;base64的应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

偶爾加入一個網安群的時候，入群題目是這個：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQuSURBVHhe7ZptmoMgDIR7rh6o5+lpvEwP01XUGshAokgX+8z+7PKRTF6SoN7e/KMCnSlw68wemkMF3oSSEHSnAKHsLiQ0iFCSge4UIJTdhYQGEUoy0J0ChLK7kNAgQkkGulOAUHYXEhpEKMlAdwpcG8rhcRv/HkN3stIgW4F88DYoX89nObjmANuOc0eMXpHHcyX9+mowhgHKmdlChM0BZzvzet6DSSW7xjEWk8Hu+/O1x7zF1237/Uu4t/O46V6sZuARoZb9KqbO7On4rJlykqcYYnNAjSbx3Gmrj6WTzxirVlA+90F82G+nm4fX3zOxgqyKqRaUU7b8FpRDOeyjJa7k5oByT1yWse4mxfDC3NrrprnQtQeUMuUXoURmCGHdKfl/oTS8MElxu2mudO0BXUCZL8efVGU0EmsQjkGpM2H8y/CwGtW1C3el8ywxhHKWxgOlaPNj0VcRRW+OoiKvCXF0o6YeXWLQDaNQyMf1Clhsi22D9HUNXOBCVZamaBmiO5BxRdRQOt3M3oFUAD4/HDolSChx7AvXzRIJQtgsUfMu6HB+HglNLc5d5KiwpcAqTH7Idk/lvLD9Z0rUx4vYWL2UJ4WY6XbdL91ML57+EjsRNEMnw/LCrKklN9NNkbuLvKsdabjM/ZMByh+PDWuuw6kDEYXPzeSfzGARlNG1M1ENRCfGLlUuJ5MVTg+UyxGzC+1+KN/DkDyuTSVbqo7vNnagfKPTrH9b8pQtgQ/PRCifDTaUJaIWw8adUycklLrcppkyCZfkJ5cYlSZnQTkmsYf58OYAlMpg6JnlhYlC9uxhIdWvbr1NS8Ahc9pgQlkkai3fOorVUK4JGeYTJIgVTm+mnCqrmSfOgDJ0mOlOlhcmClk3M0KmPzeF0mnDGVB6LjqbmKB8p5GRQ34DStRCdpEpp5MRNWRNocwsjk9i7nyqugzPYTWUSZuqe0qVucAT5tgH9ITmxEdCdihjpcCVAgfI8uJ4pgx3K3UhgBeRQ9dtbJmjp1TnYmsKoSH1UGqKE23mxlrsri4yKsuAFnZ5BrAugypw0/IdSvHmxHJbEI6lREzj0asuOc7TR8BONdd9pNKCo4LRNY9CdgCEXjqObDhQvsFpy7z7DsqHP9khxp9DzNeKbSR+Iy3/n31tqVFYe17xFUZkTu507+4px4USFwBRm32lbzFyXphgRMtn3cwqqaef8a0UrMHlaJYM8RC1Iq2DeOXvKUdVjALmzromST8+4N+Egm9rrwzl/DpAVlddnE9su36Jyx6ECtkUxufaUMJOzfwQsxldUbnTLyO/ckCcNsS112yDmkkGF/4xKL8rHndrowChbKMrV61QgFBWiMepbRQglG105aoVChDKCvE4tY0ChLKNrly1QgFCWSEep7ZRgFC20ZWrVihAKCvE49Q2ChDKNrpy1QoF/gDXIhmWmc+CSAAAAABJRU5ErkJggg==

剛開始還是挺懵逼的，誒，是Base64編碼嘛？看樣子好像是圖片轉成Base64的，然后放在搜索引擎一回車，竟然是得到了入群密碼，是不是有點神奇？

Return Top 下面的內容是轉載的他人的博客：

data:image/png;base64是什么？

翻閱了一些資料才知道，這是在RFC2397中定義的Data URI scheme，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。

優點：? ?

減少HTTP請求數，沒有了TCP連接消耗和同一域名下瀏覽器的并發數限制。
對于小文件會降低帶寬。雖然編碼后數據量會增加，但是卻減少了http頭，當http頭的數據量大于文件編碼的增量，那么就會降低帶寬。
對于HTTPS站點，HTTPS和HTTP混用會有安全提示，而HTTPS相對于HTTP來講開銷要大更多，所以Data URI在這方面的優勢更明顯。
可以把整個多媒體頁面保存為一個文件。

缺點：???

無法被重復利用，同一個文檔應用多次同一個內容，則需要重復多次，數據量大量增加，增加了下載時間。
無法被獨自緩存，所以其包含文檔重新加載時，它也要重新加載。
客戶端需要重新解碼和顯示，增加了點消耗。
不支持數據壓縮，base64編碼會增加1/3大小，而urlencode后數據量會增加更多。
不利于安全軟件的過濾，同時也存在一定的安全隱患。

Return Top

Data URI Scheme的基本概念

《HTTP權威指南》對URI和URL的定義：

URI（Uniform Resource Identifier）:統一資源標識符,服務器資源名被稱為統一資源標識符。

URL（Uniform Resource Locator）:統一資源定位符，描述了一臺特定服務器上某資源的特定位置。

URN（Uniform Resource Name）:統一資源名稱。

URL組成： 協議://主機名[:端口]/ 路徑/[:參數] [?查詢]#Fragmentprotocol :// hostname[:port] / path / [:parameters][?query]#fragment

URI,URL,URN三者關系：

URL,URN是URI的子集

Return Top

什么是Data URI Scheme

data URI scheme 允許我們使用內聯（inline-code）的方式在網頁中包含數據，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。常用于將圖片嵌入網頁。

傳統的圖片HTML是這樣用的：

img src="images/image.png"/

Data URI的圖片內嵌式是這樣用的：

img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQuSURBVHhe7ZptmoMgDIR7rh6o5+lpvEwP01XUGshAokgX+8z+7PKRTF6SoN7e/KMCnSlw68wemkMF3oSSEHSnAKHsLiQ0iFCSge4UIJTdhYQGEUoy0J0ChLK7kNAgQkkGulOAUHYXEhpEKMlAdwpcG8rhcRv/HkN3stIgW4F88DYoX89nObjmANuOc0eMXpHHcyX9+mowhgHKmdlChM0BZzvzet6DSSW7xjEWk8Hu+/O1x7zF1237/Uu4t/O46V6sZuARoZb9KqbO7On4rJlykqcYYnNAjSbx3Gmrj6WTzxirVlA+90F82G+nm4fX3zOxgqyKqRaUU7b8FpRDOeyjJa7k5oByT1yWse4mxfDC3NrrprnQtQeUMuUXoURmCGHdKfl/oTS8MElxu2mudO0BXUCZL8efVGU0EmsQjkGpM2H8y/CwGtW1C3el8ywxhHKWxgOlaPNj0VcRRW+OoiKvCXF0o6YeXWLQDaNQyMf1Clhsi22D9HUNXOBCVZamaBmiO5BxRdRQOt3M3oFUAD4/HDolSChx7AvXzRIJQtgsUfMu6HB+HglNLc5d5KiwpcAqTH7Idk/lvLD9Z0rUx4vYWL2UJ4WY6XbdL91ML57+EjsRNEMnw/LCrKklN9NNkbuLvKsdabjM/ZMByh+PDWuuw6kDEYXPzeSfzGARlNG1M1ENRCfGLlUuJ5MVTg+UyxGzC+1+KN/DkDyuTSVbqo7vNnagfKPTrH9b8pQtgQ/PRCifDTaUJaIWw8adUycklLrcppkyCZfkJ5cYlSZnQTkmsYf58OYAlMpg6JnlhYlC9uxhIdWvbr1NS8Ahc9pgQlkkai3fOorVUK4JGeYTJIgVTm+mnCqrmSfOgDJ0mOlOlhcmClk3M0KmPzeF0mnDGVB6LjqbmKB8p5GRQ34DStRCdpEpp5MRNWRNocwsjk9i7nyqugzPYTWUSZuqe0qVucAT5tgH9ITmxEdCdihjpcCVAgfI8uJ4pgx3K3UhgBeRQ9dtbJmjp1TnYmsKoSH1UGqKE23mxlrsri4yKsuAFnZ5BrAugypw0/IdSvHmxHJbEI6lREzj0asuOc7TR8BONdd9pNKCo4LRNY9CdgCEXjqObDhQvsFpy7z7DsqHP9khxp9DzNeKbSR+Iy3/n31tqVFYe17xFUZkTu507+4px4USFwBRm32lbzFyXphgRMtn3cwqqaef8a0UrMHlaJYM8RC1Iq2DeOXvKUdVjALmzromST8+4N+Egm9rrwzl/DpAVlddnE9su36Jyx6ECtkUxufaUMJOzfwQsxldUbnTLyO/ckCcNsS112yDmkkGF/4xKL8rHndrowChbKMrV61QgFBWiMepbRQglG105aoVChDKCvE4tY0ChLKNrly1QgFCWSEep7ZRgFC20ZWrVihAKCvE49Q2ChDKNrpy1QoF/gDXIhmWmc+CSAAAAABJRU5ErkJggg=="/

Data URI的直接通過url傳遞方式：

在瀏覽器地址欄中輸入以上代碼，可直接顯示那個flag！！！

Return Top

Data URI的格式規范

data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data> 1. data ：協議名稱； 2. [<mime type>] ：可選項，數據類型（image/png、text/plain等） 3. [;charset=<charset>] ：可選項，源文本的字符集編碼方式 4. [;<encoding>] ：數據編碼方式（默認US-ASCII，BASE64兩種） 5. ,<encoded data> ：編碼后的數據

目前，Data URI scheme支持的類型有：

data:, 文本數據 data:text/plain, 文本數據 data:text/html, HTML代碼 data:text/html;base64, base64編碼的HTML代碼 data:text/css, CSS代碼 data:text/css;base64, base64編碼的CSS代碼 data:text/javascript, Javascript代碼 data:text/javascript;base64, base64編碼的Javascript代碼 data:image/gif;base64, base64編碼的gif圖片數據 data:image/png;base64, base64編碼的png圖片數據 data:image/jpeg;base64, base64編碼的jpeg圖片數據 data:image/x-icon;base64, base64編碼的icon圖片數據

Data URI和MHTML兩者的配合可以完整的解決所有的主流瀏覽器，它們由于無法被緩存和重復利用的缺陷，所以并不適合直接在頁面中使用，但在CSS和JavaScript文件中對圖片適當地使用有非常大的優越性：大大減少請求數，現在大型網站的CSS引用了大量的圖片資源。CSS和JavaScript都可以被緩存，間接的實現了數據的緩存。利用CSS可以解決Data URI的重復利用問題。

告別CSS Sprites，CSS Sprites的出現是為了減少請求數，但它除了帶來在不確定情況下的異常外，CSSSprites還需要人為的圖片合并，即使有合并工具也依舊必須人為地在如何有效的拼圖上耗費大量的時間，并帶來維護的困難。當你遵循一定的設計原則后，你就可以完全拋棄CSS Sprites來編寫CSS，最后使用工具在上傳到服務器環節把圖片轉換成Data URI和MHTML，如《利用data-uri合并樣式表和圖片》中用python實現的工具，這可以節約大量的時間。

base64編碼把圖片文件增加了1/3，Data URI和MHTML同時使用相當于增加了2/3，但CSS和JavaScript可以使用gzip壓縮，其可以節省2/3的數據量，所以使用gzip壓縮后的最終數據量是(1 + 1/3) * 2 * (1/3) = 8/9，所以最終流量是減少的。

它把一些 8-bit 數據翻譯成標準 ASCII 字符，網上有很多免費的base64 編碼和解碼的工具。

在網頁上顯示出來的標準方法是：

data:image/png;base64相當于圖片的Data URL，它是利用base64編碼把圖片數據翻譯成標準ASCII字符，等同于<img src="images/image.png"/>?

換句話說我們把圖像文件的內容內置在 HTML 文件中，節省了一個 HTTP 請求。

在 CSS 中使用：

body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQuSURBVHhe7ZptmoMgDIR7rh6o5+lpvEwP01XUGshAokgX+8z+7PKRTF6SoN7e/KMCnSlw68wemkMF3oSSEHSnAKHsLiQ0iFCSge4UIJTdhYQGEUoy0J0ChLK7kNAgQkkGulOAUHYXEhpEKMlAdwpcG8rhcRv/HkN3stIgW4F88DYoX89nObjmANuOc0eMXpHHcyX9+mowhgHKmdlChM0BZzvzet6DSSW7xjEWk8Hu+/O1x7zF1237/Uu4t/O46V6sZuARoZb9KqbO7On4rJlykqcYYnNAjSbx3Gmrj6WTzxirVlA+90F82G+nm4fX3zOxgqyKqRaUU7b8FpRDOeyjJa7k5oByT1yWse4mxfDC3NrrprnQtQeUMuUXoURmCGHdKfl/oTS8MElxu2mudO0BXUCZL8efVGU0EmsQjkGpM2H8y/CwGtW1C3el8ywxhHKWxgOlaPNj0VcRRW+OoiKvCXF0o6YeXWLQDaNQyMf1Clhsi22D9HUNXOBCVZamaBmiO5BxRdRQOt3M3oFUAD4/HDolSChx7AvXzRIJQtgsUfMu6HB+HglNLc5d5KiwpcAqTH7Idk/lvLD9Z0rUx4vYWL2UJ4WY6XbdL91ML57+EjsRNEMnw/LCrKklN9NNkbuLvKsdabjM/ZMByh+PDWuuw6kDEYXPzeSfzGARlNG1M1ENRCfGLlUuJ5MVTg+UyxGzC+1+KN/DkDyuTSVbqo7vNnagfKPTrH9b8pQtgQ/PRCifDTaUJaIWw8adUycklLrcppkyCZfkJ5cYlSZnQTkmsYf58OYAlMpg6JnlhYlC9uxhIdWvbr1NS8Ahc9pgQlkkai3fOorVUK4JGeYTJIgVTm+mnCqrmSfOgDJ0mOlOlhcmClk3M0KmPzeF0mnDGVB6LjqbmKB8p5GRQ34DStRCdpEpp5MRNWRNocwsjk9i7nyqugzPYTWUSZuqe0qVucAT5tgH9ITmxEdCdihjpcCVAgfI8uJ4pgx3K3UhgBeRQ9dtbJmjp1TnYmsKoSH1UGqKE23mxlrsri4yKsuAFnZ5BrAugypw0/IdSvHmxHJbEI6lREzj0asuOc7TR8BONdd9pNKCo4LRNY9CdgCEXjqObDhQvsFpy7z7DsqHP9khxp9DzNeKbSR+Iy3/n31tqVFYe17xFUZkTu507+4px4USFwBRm32lbzFyXphgRMtn3cwqqaef8a0UrMHlaJYM8RC1Iq2DeOXvKUdVjALmzromST8+4N+Egm9rrwzl/DpAVlddnE9su36Jyx6ECtkUxufaUMJOzfwQsxldUbnTLyO/ckCcNsS112yDmkkGF/4xKL8rHndrowChbKMrV61QgFBWiMepbRQglG105aoVChDKCvE4tY0ChLKNrly1QgFCWSEep7ZRgFC20ZWrVihAKCvE49Q2ChDKNrpy1QoF/gDXIhmWmc+CSAAAAABJRU5ErkJggg==");}

關于移動端的性能可以參考 Peter McLachlan在13年寫的一片文章：http://www.mobify.com/blog/data-uris-are-slow-on-mobile/

轉載于:https://www.cnblogs.com/zwshi/p/9251244.html

總結

以上是生活随笔為你收集整理的浅析data:image/png;base64的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：树莓派 -- 按键（key）使用BCM
下一篇：新股上市首日大跌25% 看样中签也不一定