编码为data-uri的空白图像

Question

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

我的技术如下:我生成滑块标记，第一张幻灯片图像照常插入(使用<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,"会更好？

Answer 1

我查看了一下，编码为data-uri的smallest possible transparent GIF image如下：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

这就是我现在使用的。

Answer 2

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

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

取而代之的是1x1白色图像的base64编码。

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

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

Answer 3

我见过的最小的

data:image/gif;base64,R0lGODlhAQABAAAAACw=

更新：根据@bryc的报告，这个似乎坏了，不能再工作了，请使用其他答案。