77

我已经构建了一个图像滑块（基于了不起的bxSlider），它将在图像滑入视图之前即时预加载图像。它已经运行得很好，但我认为我的解决方案不是有效的 HTML。

我的技术如下：我生成滑块标记，第一张幻灯片图像照常插入（带有<img src="foo.jpg">），随后的图像在数据属性中引用，如<img data-orig="bar.jpg">. 然后，Javascriptdata-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=""属性（这在某些浏览器中对性能有害），我已经插入以有效地插入空白图像作为占位符。src="data:"

问题是，我似乎在data-URI 的文档中找不到任何内容，说明这是否是有效的 data-URI。我基本上想要解析为空白/透明图像的最小数据 URI，因此浏览器可以立即解析 src 并继续前进（没有错误或网络请求）。也许src="data:image/gif;base64,"会更好？

4

7 回答 7

167

我查看了它，编码为 data-uri的最小的透明 GIF 图像是这样的：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

这就是我现在正在使用的。

于 2012-04-01T18:47:07.660 回答
39

如果您需要 1x1 像素的透明图像，只需将此数据 uri 设置为src默认属性（保留///部分，它编码字节 255，而不是注释）。

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

相反，这是对 1x1 白色图像的 base64 编码。

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

否则，您可以data:null为每个图像设置并保存约 60 个额外字节。

于 2012-02-03T11:30:51.477 回答
25

我见过最小的

data:image/gif;base64,R0lGODlhAQABAAAAACw=

更新：正如@bryc 报告的那样，这似乎已损坏并且不再起作用，请使用其他答案。

于 2014-07-03T09:05:34.273 回答
25 
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

有效且高度可压缩。如果页面中有另一个内联 svg，则基本上是免费的。

于 2015-07-12T11:12:15.477 回答
12 
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

更小：D

于 2013-11-10T16:05:16.563 回答
9

1px x 1px JPEG 图像

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
于 2014-04-14T23:07:17.310 回答
5

Fabrizio 的“白色 gif”实际上并不完全是白色的：它是rgb(254, 255, 255)。

我使用在此页面上找到的以下一个（恰好更小）。

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
于 2014-02-28T15:18:05.073 回答