Fatal编程技术网
  • html/
  • Html 编码为数据uri的空白图像

Html 编码为数据uri的空白图像

html

Html 编码为数据uri的空白图像,html,web-standards,data-uri,Html,Web Standards,Data Uri,我已经建立了一个图像滑块（基于Greatic），它将在图像滑入视图之前及时预加载图像。它已经运行得很好了，但我认为我的解决方案不是有效的HTML 我的技术如下：我生成滑块标记，第一张幻灯片图像像往常一样插入（使用），后续图像在数据属性中引用，如必要时更改，从而触发预加载 换言之，我有： <div class="slider"> <div><img src="time.jpg" /></div> <div><img

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

我的技术如下：我生成滑块标记，第一张幻灯片图像像往常一样插入（使用
），后续图像在数据属性中引用，如
必要时更改，从而触发预加载

换言之，我有：


<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:”
，以有效地插入空白图像作为占位符


问题是，我似乎找不到任何东西来说明这是否是一个有效的数据URI。我基本上想要解析为空白/透明图像的最小数据URI，这样浏览器就可以立即解析src并继续（没有错误或网络请求）。也许
src=“data:image/gif；base64，”
会更好？
如果需要透明图像1x1像素，只需将此数据uri设置为
src
默认属性（保留
//
部分，它编码字节255，而不是注释）

这是1x1白色图像的base64编码


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


否则，您可以设置
数据：null
，并为每个图像保存约60个额外字节。
我查看了它，编码为数据uri的是：


数据：图像/gif；base64，R0LGodlhaqaabaaaach5baekaaaaaaaaaaaaaaictaeaow==

这就是我现在使用的


data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=


更小：D
Fabrizio的“白色gif”实际上不是完全白色的：它是rgb（254255255）

我使用了下面的一个（恰好更小），在上找到

1px×1px JPEG图像

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
我见过的最小的 更新：正如@bryc所报告的，这似乎已损坏，不再有效，请使用其他答案。

数据：image/svg+xml，

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
有效且高度可压缩。如果页面中有另一个内联svg，则基本上是免费的。

您可以提供一个链接来验证数据：null作为图像源是否有效吗？@JensRoland，根据此Mozilla KB，空数据是有效的：但非图像不会呈现，因此任何alt属性都会失效。@K3---rnc:我从Mozilla看到了该列表；不幸的是，这不是规范，只是Mozilla测试人员的预期行为；换句话说，它反映了Mozilla对规范的解释。这是一个好迹象，但它不能保证IE或Webkit的任何版本都会有相同的行为。@fcalderan我很好奇，既然两个版本的大小都一样，为什么要提供白色版本？白色比透明的有什么优势吗？没错，那件很可爱！但它是符合标准的gif吗？你能详细说明一下你是如何做到这一点的吗？链接上说，这一个和14字节的一个都只适用于Chrome浏览器，并且不能保证它能在所有浏览器上运行。此外，生成的gif似乎不会在任何图像编辑器中打开。所以我会犹豫是否使用它。@JensRoland添加一个缺少的字节（LZW头字节）将使它在大多数图像编辑器中打开（将
=
更改为
C
）。它在PS/Paint/Gimp中是黑色的，在Firefox中是白色的，在Chrome中是透明的，因为没有颜色信息，这取决于软件来决定默认值。如果您的
img
元素已经被隐藏，并且您只是试图避免HTTP 404错误，请参阅以获取非透明图像的较短数据。只需使用空哈希@iGidas：坏主意，因为许多浏览器实际上会向主页发出第二个请求（造成比原始图像更糟糕的性能影响，并在服务器日志中创建混乱的条目），尝试将HTML解释为图像，抛出错误，并可能导致真正的应用程序错误（例如，在购物车/结账页面中，“页面刷新”会导致在购物篮中添加更多项目或触发安全措施）实际的
数据：image/gif；base64，
用作
src
？或者更短的
数据：，
以昏迷结尾。似乎是有效的HTML，在每个现代浏览器中都能正常工作，没有任何错误。有任何反对使用它的论点吗？当然，除了一个是Chrome而已。在Firefox中打开它，你会得到
图像显示e是因为它包含错误
。请参阅@JensRoland，是的，对，我确认它在Firefox上不起作用！尽管一年多前使用它时，我不记得FF有任何问题！weird@JensRoland我需要一个透明的PNG：如果你在一个src为清晰gif的img上改变不透明度，当你重置不透明度时，清晰度有问题。这在Chrome中也不起作用。如果您直接在Chrome中打开
数据：image/gif；base64，R0
，并将其与此答案进行比较，它会显示相同的“损坏”16x16图像。因此，您自欺欺人地认为Chrome正确地将其渲染为1x1透明gif。@bryc，这似乎完全正确，虽然我在5年前使用过它，当时它还在工作，或者我一直错误地认为它在工作。因此，现在每个人都应该使用它。我想如果你想要白色像素，一个就可以了，但我一直在寻找一个更通用的透明像素。我喜欢这个。我只看到两个缺点：第一，在IECan中不支持SVG（10）小一些，但它们的体积较小：
/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/7 7 7 7 7 7 7 7 7 7 7 7 7/9/9 9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/9/7/9/9/9/9/9/9/7/7/9/9/7/7 7 7/7 7 7 7/7/7 7 7 7/7/7 7 7 7 7/7 7/7/7/7 7 7 7 7 7/7/7 7/7/7/7/7/7 7 7 7 7 7/7/7 7 7 7 7 7/7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7基础64，R0Lgodlhaqaaaaacwaaaaaaqabaac
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==

data:image/gif;base64,R0lGODlhAQABAAAAACw=

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