Html 编码为 data-uri 的空白图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9126105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blank image encoded as data-uri
提问by Jens Roland
I've built an image slider (based on the terrific bxSlider) which will preload images just-in-time before they slide into view. It's working pretty well already, but I don't think my solution is valid HTML.
我已经构建了一个图像滑块（基于了不起的bxSlider），它将在图像滑入视图之前及时预加载图像。它已经运行得很好，但我认为我的解决方案不是有效的 HTML。
My technique is as follows: I generate the slider markup with the first slide image being inserted as usual (with an <img src="foo.jpg">) and subsequent images being referenced in a data attribute like <img data-orig="bar.jpg">. A Javascript then juggles the data-orig -> srcchange when necessary, triggering the preloading.
我的技术如下：我生成滑块标记，第一张幻灯片图像像往常一样插入（带有<img src="foo.jpg">），随后的图像在像<img data-orig="bar.jpg">. Javascript 然后data-orig -> src在必要时处理更改，触发预加载。
In other words, I have:
换句话说，我有：
<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>
To avoid empty src=""attributes (which are harmful to performancein some browsers), I've inserted src="data:"to effectively insert a blank image as a placeholder.
为了避免空洞src=""的属性（这是有害的性能在某些浏览器），我已经插入src="data:"到有效插入一个空白图像作为占位符。
The thing is, I can't seem to find anything in the documentation for data-URIsaying whether this is a valid data-URI or not. I basically want the minimal data-URI that resolves to a blank/transparent image, so the browser can resolve the src immediately and move on (with no error or network request). Maybe src="data:image/gif;base64,"would be better?
问题是，我似乎无法在data-URI的文档中找到任何内容，说明这是否是有效的 data-URI。我基本上想要解析为空白/透明图像的最小数据 URI，因此浏览器可以立即解析 src 并继续（没有错误或网络请求）。也许src="data:image/gif;base64,"会更好？
回答by Jens Roland
I looked into it and the smallest possible transparent GIF image, encoded as a data-uri, was this:
我查看了它，最小的透明 GIF 图像，编码为数据 uri，是这样的：
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
which is what I'm using now.
这就是我现在正在使用的。
回答by Fabrizio Calderan
If you need a transparent image 1x1 pixel, just set this data uri as srcdefault attribute (keep the ///parts, it encodes byte 255, not a comment).
如果您需要 1x1 像素的透明图像，只需将此数据 uri 设置为src默认属性（保留///部分，它编码字节 255，而不是注释）。
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
This is instead a base64 encoding for an image 1x1 white.
这是 1x1 白色图像的 base64 编码。
data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==
Otherwise you could set data:nulland save ~60 extra bytes for each image.
否则，您可以data:null为每个图像设置并保存大约 60 个额外的字节。
回答by azerafati
The smallest I've ever seen
我见过最小的
data:image/gif;base64,R0lGODlhAQABAAAAACw=
update:This seems broken and doesn't work anymore as reported by @bryc, please use the other answers.
更新：这似乎坏了，不再像@bryc 报告的那样工作，请使用其他答案。
回答by Adria
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
Valid and highly compressible. Essentially free if there's another inline svg in the page.
有效且高度可压缩。如果页面中有另一个内联 svg，则基本上免费。
回答by Alex
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
is smaller :D
更小：D
回答by Matt Votsikas
1px by 1px JPEG image
1px x 1px JPEG 图像
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
