我见过的最小的

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=""个属性（harmful to performance中some browsers），我已插入src="data:"以有效插入空白图片作为占位符。

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

Answer 1

我调查了它，编码为数据uri的smallest possible transparent GIF image是这样的：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

Answer 2

如果您需要透明图像1x1像素，只需将此数据uri设置为src默认属性

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

这是图像1x1白色

的base64编码

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

否则你可以设置data:null并为每个图像节省大约60个字节

Answer 3

我见过的最小的

数据：图像/ GIF; BASE64，R0lGODlhAQABAAAAACw =

Answer 4

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

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

Answer 5

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

更小：D

Answer 6

1px xpp JPEG图像

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

Answer 7

法布里奇奥的“白色gif”实际上并不是完全白色的：它是rgb(254, 255, 255)。

我在this page上找到了以下一个（恰好更小）。

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

空白图像编码为data-uri

7 个答案:

我见过的最小的