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

我使用一个透明的1x1图像与背景图像，以便能够使用精灵，并仍然为一些图标提供替代文本。

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

我意识到我可以对实际的图像使用数据 URI: s 而不是 sprites，但是当所有内容都保存在 CSS 中而不是分散在各处时，维护起来更容易。

74480 次浏览
小开

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

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

由 Org 数据: URI 生成器生成。

小开

这个家伙 通过 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。

小开
最佳答案

在使用了不同的透明 GIF 之后，其中一些不稳定并导致 CSS 小故障。例如，如果您有一个 <img>，并且您使用尽可能小的透明 GIF，那么它工作得很好，但是，如果您希望透明 GIF 具有一个 background-image，那么这是不可能的。由于某些原因，一些 GIF (如下面的 GIF)会阻止 CSS 背景(在某些浏览器中)。

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

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

我建议使用稍长和更稳定的版本如下:

Something Stable something (但稍长-78字节)

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

作为另一个提示，不要像一条评论建议的那样省略 image/gif。这将在多个浏览器中中断。

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

最终的长度取决于 gzip 所包含的内容。

小开

您可以尝试以下 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 得到一个空图像: //:0

小开

这是我找到的最小的(26字节) :

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

最小 PNG-114字节:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
小开

对于空白图像:

data:null

(翻译成 src=(unknown))

小开

BMP -1x1 RGBA (透明)-基于 这个-194字节

data:image/bmp;base64,Qk1xAAAAAAAAAHsAAABsAAAAAQAAAAEAAAABACAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAD/AAD/AAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ==

在 java-script 中，它可以被压缩到106字节

"data:image/bmp;base64,Qk1x"+"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))


let s = "data:image/bmp;base64,Qk1x"+"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))




console.log(s);

小开

你可以用

data:null;,

<img src="data:null;," alt="My null image">

<img src="data:null;," alt="My null image" style="width: 100px;height: 10px;background: red;padding: 25px 16px;margin: 5px 15px;z-index: 5000;display: block ruby;">

或者

  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

提交答案