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

124

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

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

我意识到我可以使用数据URI：s代替实际的图片，但是当所有内容都保存在CSS中而不是分散放置时，维护起来会更容易。

css css-sprites

— 雅各布·拉斯克
source

1

使用具有缓存设置的实际1x1图像会更好吗？您没有更多的http请求，并且在总的数据开销中，图像的url可能小于78字节的数据URI。

— Redzarf

1

@Redzarf：实际上，没有，可能不会更好。很小，很少变化的资源会影响页面加载时间，这不是因为文件大小，而是因为HTTP请求的往返路程。另一个微妙之处在于，大多数浏览器比其他资源更喜欢缓存CSS，因此浏览器不太可能尝试刷新CSS（以及嵌入的内容），从而节省了更多的HTTP往返路程。

— SingleNegationElimination

167

在使用不同的透明GIF玩耍后，有些不稳定并会导致CSS故障。例如，如果您有一个，<img>并且使用了可能的最小透明GIF，则它可以正常工作，但是，如果您随后希望透明GIF具有一个background-image，则这是不可能的。由于某些原因，某些GIF（例如以下代码）会阻止CSS背景（在某些浏览器中）。

较短（但不稳定-74字节）

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

⇊稳定⇊（但稍长-78个字节）

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

作为另一提示，不要忽略image/gif一个评论所建议的内容。这将在多个浏览器中中断。

— 莱克
source

1

+1谢谢！我注意到这很方便。我使用您的数据创建了此插件，因此我可以使用带有背景封面的本机响应型图像或包含-> github.com/sebringj/jquery-transparent-gif/blob/master/…–

— Jason Sebring

1

为什么矮个子“不稳定”？我看到它偶尔会导致黑色图像，我只是好奇是否有人知道原因。

— jvenema 2015年

经过一番痛苦之后，我实际上发现“较短”版本实际上使旧版Android浏览器（HTC One S，OS 4.1）上我网站上某些（不是全部）页面上的浏览器崩溃。

— WebSeed '02

好的答案，但到目前为止却不是最小的答案。

— 乔什·哈布达斯

22

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

最终长度取决于所压缩的内容。

— 阿德里亚
source

3

是否有反对使用SVG的论点？有什么不好的主意吗？

— tremby

SVG在许多情况下都可以，但是当与结合使用时width: auto;，SVG会占据其父级的宽度。静态图像（例如GIF或PNG）在设置为固定的高度和宽度自动值时，将保留其宽高比。

— snazzybouche

16

我认为它必须是压缩的透明1x1 GIF文件（82字节）：

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

使用dopiaza.org data：URI generator生成。

— 卡拉奇·伊斯特万
source

13

最小的PNG-114字节：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

— 乔什卡尔
source

值得一提的是，使用GIMP可以轻松实现这一点。生成的文件的大小为68个字节（到目前为止，最小的大小）。

— Ismael Miguel

@AminahNuraini，这是PNG。

— joshcarr '16

2

@AminahNuraini：这个答案对您说“ SVG”如何？

— Lightness Races in Orbit

10

这个家伙通过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解码器似乎并不关心实际上没有颜色表。

因此，我更改了逻辑屏幕描述符以指示没有全局颜色表，并删除了该表本身，总共节省了六个字节，使文件大小减小到只有37个字节。

有趣的是，尽管Firefox和GIMP都打开并显示（透明时“显示”？），但Wordpress给了我一则可爱的GD错误消息清单，抱怨这不是有效的GIF文件。正好。

为了使其更小，我查看了图像中最大的剩余“可选”块，即图形控件扩展。如果您不需要透明度，则不再需要此块，而这又是8字节，您可以删除。

资料来源：有史以来最细的GIF。

— 麦卡米
source

1

根据该文章，这37个字节的变化依赖于未定义的行为，实际上，作者提到wordpress的图像解析器无法处理它。尽管它可能会在大多数浏览器上运行，但我认为这是一个冒险的选择。我会坚持同一篇文章的43个字节的变化形式。上面已经发布了一个变体。另请参见对最佳答案

— Brian

9

您可以尝试以下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"/>

也可以看看：

— Kenorb
source

2

可能也被编码并以图标或CSS使用content属性。

— 乔什·哈布达斯

6

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

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

— 卡拉斯
source

这在IE11中变成黑色。

— tomasz86 '16

4

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

— 乔吉斯
source

Firefox 44和Internet Explorer 11显示img alt标签。您要么必须使用上面的一种，要么要删除alt标签

— PersyJack

这比对图像的请求/响应更有效？

— 珠穆朗玛峰

虽然不会验证

— 卢西恩Davidescu

0

对于空图像：

data:null

（它将转换为src=(unknown)）

— 托杜亚
source

我原则上喜欢这种方式，但实践中不赞成w3c验证器：错误：值数据错误：元素img上的属性src为空：URI的提前结束。

— brennanyoung