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 data:URI generator生成。

Answer 4

最小的PNG - 114字节：

for row in reader:
    total = int(row[3])
    paid = int(row[5])
    if 'A' in row[4] and paid < total:
        print('\t'.join((_ for _ in row)), total - paid)

Answer 5

This guy通过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-encoded图像数据块。它需要5个字节来表示图像中的单个像素。压缩算法不是为了很好地压缩单个字节而设计的。
GIF预告片（1个字节）

十六进制值为3B（ASCII中为;）的单字节表示GIF的结束。

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

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

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

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

有趣的是，Wordpress给了我一个可爱的GD错误消息列表抱怨这不是一个有效的GIF文件，尽管Firefox和GIMP都打开并显示（当它透明时它是否“显示”？）文件就好了。

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

来源：The Tiniest GIF Ever。

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"/>

另见：

Answer 7

我使用以下数据uri来获取空图像：countryList = (ArrayList<Country>) savedInstanceState.getSerializable("countryList");

Answer 8

这是我找到的最小的（26个字节）：

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

Answer 9

对于空白图片：

data:null

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

Answer 10

BMP - 1x1 RGBA（透明） - 基于 this - 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);

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

10 个答案:

⇊稳定⇊（但略长 - 78字节）

GIF89a规范