透明图像可能的最小数据URI图像

Question

我正在使用带有背景图像的透明1x1图像,以便能够使用精灵并仍然为某些图标提供替代文本.

我想为图像使用数据URI来减少HTTP请求的数量,但是生成透明图像的最小可能字符串是什么？

我意识到我可以使用数据URI:s来表示实际图像而不是精灵,但是当所有内容都保存在CSS中而不是分散时,它更容易维护.

Answer 1

使用不同的透明GIF后,有些不稳定会引起CSS故障.例如,如果你有一个<img>并且你使用最小的透明GIF,它可以正常工作,但是,如果你想要你的透明GIF有一个background-image,那么这是不可能的.出于某种原因,某些GIF(例如以下内容)会阻止CSS背景(在某些浏览器中).

更短(但不稳定 - 74字节)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

我建议使用稍长且更稳定的版本,如下所示:

⇊稳定⇊(但略长 - 78字节)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

作为另一个提示,不要image/gif像一条评论所暗示的那样省略.这会破坏几个浏览器.

Answer 2

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

最终的长度取决于它的内容.

Answer 3

我认为它必须是压缩透明的1x1 GIF文件(82字节):

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

使用dopiaza.org数据生成:URI生成器.

Answer 4

最小的PNG - 114字节:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Answer 5

这家伙通过GIF规范解决了这个问题.他的解决方案transparent.gif是37字节:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

首先去除透明度,然后是颜色表......

GIF89a规格

• 标题(6个字节)

  由字节"GIF"和版本号组成,通常是89a.

• 逻辑屏幕描述符(7个字节)

  没有太多细节,文件的这一部分表明以下内容:

  • 该文件的大小为1x1像素.
  • 有一个全局颜色表.
  • 全局颜色表中有2种颜色,第二种颜色应该用作背景颜色.

• 全局颜色表(6个字节)

  每种颜色包含3个字节,红色,绿色和蓝色分别为一个字节.在我们的文件中,第一种颜色是白色,第二种颜色是黑色.

• 图形控制扩展(8字节)

  用于指示颜色表中的第二种颜色应被视为透明(也可用于动画参数,但不在此文件中).

• 图像描述符(10个字节)

  GIF文件实际上可以在其中包含多个"图像",这使您无需为图像中与背景颜色具有相同颜色的部分指定图像数据.每个图像块在整个图像大小内具有位置和大小.在上面的文件中,位置是0,0,大小是1x1.

• 图像数据(5个字节)

  一个LZW编码的图像数据块.它需要5个字节来表示图像中的单个像素.压缩算法不是为了很好地压缩单个字节而设计的.

• GIF预告片(1字节)

  十六进制值3B(;以ASCII为单位)的单个字节表示GIF的结束.

基于透明GIF所需的结构,事实证明43字节非常接近您可以获得的最小值.

但是,我设法找出一个让它变得更小的技巧.标准中提到可以选择使用全局颜色表.当然,关于在没有颜色表的情况下制作GIF时会发生什么,这是未定义的.

但是,如果将颜色表索引定义为透明,则GIF解码器似乎并不关心实际上没有颜色表.

所以我更改了逻辑屏幕描述符以指示没有全局颜色表并删除了表本身,总共保存了6个字节,使文件大小减少到仅仅37个字节.

有趣的是,Wordpress给了我一个可爱的GD错误消息列表抱怨这不是一个有效的GIF文件,尽管Firefox和GIMP都打开并显示(它是透明的"显示"吗？)文件正好.

为了使它更小,我查看了图像中最大的剩余"可选"块,图形控件扩展.如果您不需要透明度,则不再需要此块,这是您可以带走的另外8个字节.

资料来源:有史以来最珍贵的GIF.

Answer 6

您可以尝试以下SVG数据(60个字节):

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

独立的svg文件看起来像(62字节):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

也可以看看:

• 优化数据URI中的SVG
• 用于SVG(GitHub)/ SVG CSS URI的URL编码器- 优化的替换器

Answer 7

我正在使用以下数据 uri 获取空图像： //:0

Answer 8

这是我发现的最小字节（26个字节）：

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=