我已經構建了一個圖像滑塊（基於極好的bxSlider），它將在圖像滑入視圖之前及時預加載圖像。它工作得很好，但我不認爲我的解決方案是有效的HTML。作爲數據編碼的空白圖像-uri

我的技術如下：我生成滑塊標記，並像往常一樣插入第一張幻燈片圖像（使用<img src="foo.jpg">），並在<img data-orig="bar.jpg">等數據屬性中引用後續圖像。一個Javascript然後在必要時變更data-orig -> src，引發預加載。

換句話說，我有：

<div class="slider"> 
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div>

爲了避免空src=""屬性（其在some browsers harmful to performance），我已經插入src="data:"有效地插入一個空白圖像作爲佔位符。

事情是，我似乎無法找到documentation for data-URI中的任何內容，說明這是否是有效的數據URI。我基本上想要最小化的數據URI解析爲空白/透明圖像，因此瀏覽器可以立即解析src並繼續前進（沒有錯誤或網絡請求）。也許src="data:image/gif;base64,"會更好？

來源

2012-02-03 Jens Roland

只需使用空散列。 http://stackoverflow.com/a/28077004/3841049 – iGidas 2015-02-12 20:09:50

@iGidas：糟糕的主意，因爲許多瀏覽器實際上會向主頁面發出第二個請求（導致比原始圖像更差的性能影響，並在您的系統中創建令人迷惑的條目服務器日誌），嘗試將HTML解釋爲圖像，拋出錯誤，並且可能導致真正的應用程序錯誤（例如，在購物車/結帳頁面中，頁面刷新導致更多項目被添加到籃子中或觸發安全措施） – 2015-12-11 10:33:27

實際的'data：image/gif; base64，'用作'src'怎麼樣？甚至更短的數據：以昏迷結束。似乎是有效的HTML，並且在每個現代瀏覽器中都可以正常工作。任何反對使用它的論據？ – bobo 2017-01-02 20:55:42

140

我看着它和編碼爲數據的smallest possible transparent GIF image -uri，是這樣的：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

這是我現在使用。

來源

2012-04-01 18:47:07

如果您的'img'元素已被隱藏，並且您只是想避免HTTP 404錯誤，請參閱http://stackoverflow.com/a/14115340/14731以獲取非透明圖像的較短數據。 – Gili 2014-04-09 03:07:43

如果你需要一個透明圖像1x1像素只是設置此數據URI作爲src默認屬性

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

這是不是針對圖像的1x1白色base64編碼

data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

否則你可以設置data:null併爲每個圖像保存約60個額外字節

來源

2012-02-03 11:30:51 fcalderan

您能否提供一個鏈接來驗證數據：null是否作爲圖像源有效？ – 2012-04-01 18:48:13

data：null無效。 – Jack 2012-12-01 04:04:16

總是爲我工作。 – fcalderan 2012-12-01 20:17:00

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

較小：d

來源

2013-11-10 16:05:16 Alex

沒錯 - 那個可愛！但它是一個標準兼容的GIF嗎？你能否詳細說明你是如何抵達它的？ – 2013-11-11 21:07:31

http://proger.i-forge.net/The_smallest_transparent_pixel/eBQ – Alex 2013-11-12 22:22:30

ff 27.0黑點 – 2014-02-26 21:16:28

法布里奇奧的「白GIF」其實不是全白：這是rgb(254, 255, 255)。

我使用下面的一個（碰巧更小），找到this page。

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=

來源

2014-02-28 15:18:05

如果你想要一個白色像素，那就很好，但我一直在尋找一種更通用的透明像素。 – 2016-01-24 10:33:09

1x1像素的JPEG圖像

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==

來源

2014-04-14 23:07:17

我見過

數據最小：圖像/ GIF; BASE64，R0lGODlhAQABAAAAACw =

來源

2014-07-03 09:05:34 azerafati

當然，只有一個是Chrome。在Firefox中打開它，你會得到'圖像無法顯示，因爲它包含錯誤。請參閱http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/ [20121112]％20The％20smallest％20transparent％20pixel.html – 2016-01-24 10:23:23

@JensRoland，是的，我確認它不適用於Firefox！儘管一年前使用它時我不記得FF有任何問題！很奇怪 – azerafati 2016-01-24 11:51:41

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

有效且高度可壓縮。如果頁面中有另一個內聯svg，則基本上是免費的。

來源

2015-07-12 11:12:15 Adria

我喜歡這個。我看到只有兩個弱點：第一，SVG在IE9中不支持（通常不是問題，但它確實使某些站點不可行）;第二，「SVG數據需要編碼才能在IE和Firefox中工作」（見http://caniuse.com/#search=datauri），所以你實際上必須使用：'data：image/svg + xml，％ 3Csvg％20xmlns =％22http：// www.w3.org/2000/svg％22 /％3E'這比我的還要短4個字節，但看起來有點亂 – 2016-01-24 10:40:32

作爲數據編碼的空白圖像-uri

回答

我見過

相關問題