透明单像素图像的最小文件大小答案

【问题标题】：smallest filesize for transparent single pixel image透明单像素图像的最小文件大小
【发布时间】：2011-02-03 23:10:36
【问题描述】：

我正在寻找最小（就文件大小而言）透明的 1 像素图像。

目前我有一个 49 字节的 gif，这似乎是最受欢迎的。

但我记得很多年前有一个不到 40 字节。可能是 32 个字节。

谁能做得更好？只要现代网络浏览器可以显示并尊重透明度，图形格式就不必担心。

更新：好的，我找到了一个 42 字节的透明单像素 gif： http://bignosebird.com/docs/h3.shtml

UPDATE2：看起来小于 43 字节的任何内容在某些客户端中都可能不稳定。不能这样。

【问题讨论】：

我认为你手头的时间有点多。这不会产生任何实际影响......
Dested：你有超过 49 kB，因为 HTTP 标头实际上比图像大:)
请求会导致方式的数据多于图像大小，图像大小与请求大小无关。
@Dested：还必须考虑最小数据包大小..（和最小磁盘扇区）
@Dested，如果您在一个页面上有数千张相同的图像，它们将作为单个请求获取，并且很可能会为后续页面缓存

标签： image graphics transparency filesize

【解决方案1】：

http://www.maproom.co.uk/0.gif 是 43 字节，稍微刮一点。

【讨论】：

不要忘记你从标题中刮掉的几个字节，因为文件名稍微短一点:-)

【解决方案2】：

签出此blank.gif 文件（43 字节）。小于 49 :D

【讨论】：

好像 Blank.gif 不透明。您可以使用这个（记住删除“/”后的空格）：data:image/gif;base64,R0lGODlhAQABAID/ AMDAwAAAACH5BAEAAAAALAAAAAAAAAAEAAAICRAEAOw==
数据字符串不能用于缓存像 polipo 这样的代理，所以如果你遇到这种情况，你可以在这里获取一个 43 字节的透明 gif：probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

【解决方案3】：

参见：http://www.google-analytics.com/__utm.gif, 35B

Perl (45B) 中的替代方案：

## tinygif
## World's Smallest Gif
## 35 bytes, 43 if transparent
## Credit: http://www.perlmonks.org/?node_id=7974

use strict;
my($RED,$GREEN,$BLUE,$GHOST,$CGI);

## Adjust the colors here, from 0-255
$RED   = 255;
$GREEN = 0;
$BLUE  = 0;

## Set $GHOST to 1 for a transparent gif, 0 for normal
$GHOST = 1;

## Set $CGI to 1 if writing to a web browser, 0 if not
$CGI = 0;

$CGI && printf "Content-Length: %d\nContent-Type: image/gif\n\n", 
    $GHOST?43:35;
printf "GIF89a\1\0\1\0%c\0\0%c%c%c\0\0\0%s,\0\0\0\0\1\0\1\0\0%c%c%c\1\
    +0;",
    144,$RED,$GREEN,$BLUE,$GHOST?pack("c8",33,249,4,5,16,0,0,0):"",2,2,4
+0;

运行它...

$ perl tinygif > tiny.gif
$ ll tiny.gif
-rw-r--r--  1 stackoverflow  staff    45B Apr  3 10:21 tiny.gif

【讨论】：

复制和粘贴对我不起作用（识别：损坏的图像）。可能是您的格式...？代码注释也说 35/43 字节，但你的输出说 45 字节。
Google 的 _utm.gif 似乎不透明。

【解决方案4】：

您不应该真正使用“间隔 gif”。它们在 90 年代被使用；现在它们已经非常过时并且没有任何用途，并且会导致一些可访问性和兼容性问题。

使用 CSS。

【讨论】：

我想这仍然用作跟踪图像（例如跟踪“打开”了多少 html 电子邮件）。非常值得怀疑的使用......
@ChristopheD - 默认情况下在所有明智的电子邮件客户端中都被阻止（多年来），因此即使对于这种可疑的使用基本上也毫无意义。
它有助于轻松越狱同域策略，用于事件跟踪或日志记录等目的。比基于 iframe 的方法优雅得多。
@Villiam：因为没有内容的 CSS 要好得多
不知道为什么是-1，我+1这个答案来恢复平衡......安德烈亚斯是对的；间隔图像是如此过时。上面的 cmets 可能是对的，但在答案范围之外，他们谈论的是跟踪器，而不是垫片。无论如何，跟踪器不需要是透明的。

【解决方案5】：

我记得有一次，很久以前，我试图创建尽可能小的 gif。如果你按照标准，如果我没记错的话，大小是 32 字节。但是您可以“破解”规范并拥有 26-28 字节，这将在大多数浏览器中显示。这个 GIF 并不完全“正确”，但有时会起作用。只需使用 GIF 标头规范和 HEX 编辑器。

【讨论】：

【解决方案6】：

这是我在 C# 字节数组中使用的（避免文件访问）

static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x1, 0x0, 0x1, 0x0, 0x80, 0x0, 0x0, 0xff, 0xff, 0xff, 0x0, 0x0, 0x0, 0x2c, 0x0, 0x0, 0x0, 0x0, 0x1, 0x0, 0x1, 0x0, 0x0, 0x2, 0x2, 0x44, 0x1, 0x0, 0x3b };

在 asp.net MVC 中可以这样返回

return File(TrackingGif, "image/gif");

【讨论】：

是的，就是这样。你有多少字节？对不起，我现在懒得数了:)
35 字节所以我猜这不是透明的
@Nux 不，它不透明。它是白色的 (FFFFFF)。非常适合我的使用。

【解决方案7】：

为了扩展 Jacob 的字节数组答案，我为我在 photoshop 中制作的 transparant 1x1 gif 生成了 c# 字节数组。

static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00, 0x81, 0x00, 0x00, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x21, 0xff, 0x0b, 0x4e, 0x45, 0x54, 0x53, 0x43, 0x41, 0x50, 0x45, 0x32, 0x2e, 0x30, 0x03, 0x01, 0x01, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x08, 0x04, 0x00, 0x01, 0x04, 0x04, 0x00, 0x3b};

【讨论】：

【解决方案8】：

透明点，43字节：

echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x80\x0\x0\xff\xff\xff\xff\xff";
echo "\xff\x21\xf9\x04\x1\x0a\x0\x1\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0";
echo "\x0\x2\x2\x4c\x1\x0\x3b";

橙色点，35字节：

echo "\x47\x49\x46\x38\x37\x61\x1\x0\x1\x0\x80\x0\x0\xfc\x6a\x6c\x0";
echo "\x0\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x2\x44\x1\x0\x3b";

没有颜色表（可能涂成黑色），26字节：

echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x0\xFF";
echo "\x0\x2C\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x0\x3B";

前两个是我前段时间发现的（在 timthumb 漏洞时期），我不记得来源了。我找到的最新一个here。

P.S.：用于跟踪目的，而不是用作垫片。

【讨论】：

我假设这些都是 GIF？
是的，当然。注意 GIF 文件签名 (47 49 46 = GIF)。
这对于那些知道 GIF 签名的人来说非常棒。但是，这里有很多人正在寻找没有图像文件格式背景的东西，因此最好特别指出这一点。 :-)
那么为了将来参考，我会提交这个链接：en.wikipedia.org/wiki/… 通常，GIF 格式有据可查。

【解决方案9】：

http://polpo.org/blank.gif 是用 gifsicle 制作的 37 字节透明 GIF。

css-ready base64 格式：

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==

【讨论】：

【解决方案10】：

绝对最小的 100% 有效透明 GIF 为 35 个字节。

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=

47 49 46 38 39 61 01 00 01 00 00 00 00 21 f9 04 01 00 00 00 00 2c
00 00 00 00 01 00 01 00 00 02 01 00 00

这曾经是 32 个字节，后来发现在 macOS 上的 Safari 14 需要一个额外的 0x00 字节，因为它在 LZW 数据中是 strictly requiring a Block Terminator。现在是 35，事实证明 IE8 和 Safari 15 在 LZW 数据中至少需要 1 个子块。需要两个字节，因为第一个字节是子块的数量（必须为1），第二个字节是子块数据。

说明

实现尽可能小的 GIF 取决于所使用的 GIF 规范的实现。在解码 GIF 文件时，Web 浏览器通常很宽容。我们已经看到实现随着时间的推移而变化。在某一时刻，14 个字节足以在 Chrome 中呈现透明的 GIF，但它不再起作用。您可能会发现一个 GIF 在一个浏览器中显示为透明，但在另一个浏览器中显示为白色/黑色。例如，不同的 22 字节 GIF 在 Chrome 中仍然有效，但现在在现代 Firefox 中是不透明的白色。然后它甚至可能无法在 Gimp、Paint 和 Photoshop 等软件中打开。所以一般来说，最好遵循标准而不是依赖于 hacky 解决方案（尽管自从 CSS3 引入以来，间隔 GIF 几乎没有实际用途！）。

按照规范，我发现最小的 near-valid 透明 GIF 是 32 字节。 “近乎有效”，因为预告片和一些 LZW 数据可以被丢弃，并且它仍然会在几乎所有软件中打开。更严格地说，在 Safari 和 IE8 中呈现需要 35 个字节，而使用可选的预告片则需要 36 个字节。

这是按照GIF spec完成的，每个组件可以分解如下：

文件签名/版本，6 个字节
逻辑屏幕描述符，7字节
可选：全局颜色表，6 个字节¹
可选：图形控制扩展，8 字节²
图像描述符，10字节
LZW 子块图像数据，1-4 字节³
可选：预告片 (0x3B)，1 字节⁴

¹ 全局颜色表可以通过在 Logical Screen Descriptor 中禁用它来安全删除
² 这是大多数软件的透明度所必需的
³ 只需要 2 或 3 个字节的 LZW 数据，字节几乎可以是任何东西。虽然严格要求只有0x02 的第一个字节。在某些情况下（Safari）可能需要终止字节 0x00。
⁴ 可以移除预告片而不会产生不良影响。

大多数 GIF 软件都需要提供全局/本地颜色表。进一步减少（例如删除全局颜色表）可能在某些浏览器中起作用，但它们的效果通常是特定于实现的。 编辑：有一个flag 可以禁用全局颜色表，它似乎不会导致任何问题。

其他例子：

必须在所有支持 GIF（Paint、Photoshop、Gimp）的应用程序以及浏览器中打开有效示例。

以下 33 个字节在所有情况下都是不透明的白色（3 个额外的 LZW 字节）：

47 49 46 38 37 61 01 00 01 00 80 01 00 FF FF FF 00
00 00 2C 00 00 00 00 01 00 01 00 00 02 02 44 01

data:image/gif;base64,R0lGODdhAQABAIABAP///wAAACwAAAAAAQABAAACAkQB

以下 30 个字节在所有情况下都应该是不透明的白色，但在 Chrome 中是透明（？可能是 Chrome 中的错误？）：

47 49 46 38 37 61 01 00 01 00 80 01 00 FF FF FF 00 
00 00 2C 00 00 00 00 01 00 01 00 00 02

data:image/gif;base64,R0lGODdhAQABAIABAP///wAAACwAAAAAAQABAAAC

以下 24 字节在 Chrome 中呈现为透明 GIF，在 Firefox 中呈现为白色，在 Photoshop/Paint/Gimp 中呈现为黑色（有效的 GIF，但缺少颜色信息——不可预测）：

47 49 46 38 39 61 01 00 01 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAAC

【讨论】：

很遗憾，32 字节的 GIF 在 IE8 中是黑色的 :(
很棒的答案！只是提到第一个示例实际上是 24 个字节，而不是 23 个。
最新 Safari 的 32 字节 GIF 似乎也已损坏
@NgSekLong R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIA（+1 字节）或R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIAOw==（+2 字节）有效吗？奇怪，因为 32B 版本应该可以在任何地方使用，Safari 应该可以修复。
@NgSekLong 我解开了这个谜，仅在 Safari 中需要额外的字节等于 0。

【解决方案11】：

我认为这是最令人难忘的 1x1（38 字节）：

data:image/gif,GIF89a%01%00%01%00///;

根据 GIF 标头规范：

GIF Header

Offset   Length   Contents
  0      3 bytes  "GIF"
  3      3 bytes  "87a" or "89a"
  6      2 bytes  <Logical Screen Width>
  8      2 bytes  <Logical Screen Height>

第一个 %01%00 是宽度 = 0x0001

注意1px是%01%00等于0x0001

不是%00%01，否则会是0x0100

第二个是高度，同上

接下来的 3 个字节你可以输入任何内容，浏览器可以解析它

例如/// 或 !!! 或 ,,, 或 ;;; 或 +++

最后一个字节必须是：;,!

顺便说一句，如果你在 size 旁边的 3 个字节处使用 /// 或 \\\

页面标题将显示最后一个字符，否则将显示gif,...

用 Chrome 测试，Firefox 都可以，IE 不行

【讨论】：

根本无效。在我测试的任何浏览器中都无法正确呈现。