当前位置：文江博客话题详情

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

发布于 2024-08-27 18:07:09 字数 388 浏览 7 评论 0原文

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

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

但我记得很多年前有一个小于 40 字节的。可能是 32 字节。

有人能做得更好吗？图形格式并不重要，只要现代网络浏览器可以显示它并尊重透明度即可。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

涙—继续流 2024-09-03 18:07:09

首先，对于现代 CSS，在 2020 年及以后没有什么理由使用间隔 GIF（除非您正在使用复古风格的网站），所以这篇文章主要是为了好奇的人。我写这个答案只是为了了解有关 GIF 的更多信息。无论如何，让我们开始吧：

最小的有效透明 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

这适用于所有浏览器，无论新旧，以及基本上任何图像编辑器/查看器。但是，它可能无法与较弱的 GIF 解析器（例如 PHP 图像库中的解析器）一起工作。

为了完全覆盖，最小长度增加到 41 字节：

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

47 49 46 38 39 61 01 00 01 00 80 00 00 FF FF FF FF FF FF 21 F9 04
00 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02 01 00 00

这是解释。

最小的可能 GIF 取决于 GIF 规范的不同实现，这甚至可能随着时间的推移而改变。 Web 浏览器通常比较宽松且与 GIF 渲染不一致，允许显示部分损坏的 GIF。在这个答案的整个历史中，我制作了一个仅在 Chrome 中透明的 14 字节 GIF，但这不再有效。有一个 23 字节的版本可以在 Chrome 和 Firefox 中运行，但最终在 Firefox 中不再透明。我选择了一个我认为在任何地方都适用的 32 字节版本，后来发现它在 Safari 14 中不起作用。甚至修复 Safari 14 的 33 字节版本在 Safari 15 中也停止工作了！显然，最好遵循标准，而不是依赖可能无法永远有效的黑客解决方案。

通过遵循官方 GIF 规范，我们实际上得出了一个数字43 字节，分为以下部分：

文件签名、6 字节
逻辑屏幕描述符、7 字节
全局颜色表、6 字节
图形控制扩展 em>，8 字节
图像描述符，10 字节
压缩的LZW 图像数据，5 字节
预告片（0x3B）， 1 字节

其中一些在技术上是可选的。例如，可以安全地省略预告片字节，并且不会阻止图像的渲染。通过将子块计数更改为 1，LZW 数据可以减少到 4 个字节 2. 这就引出了上面的 41 字节 GIF。理论上，我们可以通过关闭一个位标志来安全地禁用全局颜色表，这可以安全地适用于所有浏览器，但可能会让无能的 GIF 解析器感到困惑。这样我们就得到了上面的 35 字节。

First of all, with modern CSS there is little reason to use spacer GIFs in 2020 and beyond (unless you're working with retro style websites), so this post is mostly just for the curious. I wrote this answer just to learn more about GIFs. Anyway let's begin:

The smallest valid transparent GIF is 35 bytes.

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

This will work in every browser, new and old, as well as basically any image editor/viewer. However, it might not work with weak GIF parsers such as the one in PHP's image library.

For full coverage, the minimum increases to 41 bytes:

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

47 49 46 38 39 61 01 00 01 00 80 00 00 FF FF FF FF FF FF 21 F9 04
00 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02 01 00 00

Here's the explanation.

The smallest possible GIF is dependent on different implementations of the GIF spec, and this can even change over time. Web browsers have often been lenient and inconsistent with GIF rendering, allowing for partially damaged GIFs to display. Throughout the history of this answer, I had crafted a 14-byte GIF that was transparent only in Chrome, but this no longer works. There was a 23-byte version that worked in Chrome and Firefox, but it eventually stopped being transparent in Firefox. I settled on a 32-byte version that I thought worked everywhere, only to later discover it didn't work in Safari 14. Even a 33-byte version that fixed Safari 14 stopped working in Safari 15! So clearly it is better to follow the standards and not rely on hacky solutions that may not work forever.

By following the official GIF spec, we actually come up with a figure of 43 bytes, broken down into the following parts:

File signature, 6 bytes
Logical Screen Descriptor, 7 bytes
Global Color Table, 6 bytes
Graphics Control Extension, 8 bytes
Image Descriptor, 10 bytes
Compressed LZW Image Data, 5 bytes
Trailer (0x3B), 1 byte

Some of this is technically optional. For example, the trailer byte can be safely omitted and won't prevent the image from being rendered. The LZW data can be reduced to 4 bytes by changing the sub-block count to 1 instead of 2. That gets us to the 41-byte GIF above. In theory we can then safely disable the Global Color Table by turning off a bit flag, which safely works in every browser, but might confuse inept GIF parsers. That gets us the 35-byte above.

回复收藏 0 原文

宛菡 2024-09-03 18:07:09

这是我在 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");

Here is what I use in a C# byte array (avoids file access)

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 };

In asp.net MVC this can be returned like this

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

回复收藏 0 原文

耀眼的星火 2024-09-03 18:07:09

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

回复收藏 0 原文

沉鱼一梦 2024-09-03 18:07:09

为了扩展 Jacob 的字节数组答案，我为在 Photoshop 中制作的透明 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};

To expand on Jacob's byte array answer, i generated the c# byte array for a transparant 1x1 gif I made in photoshop.

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};

回复收藏 0 原文

溺深海 2024-09-03 18:07:09

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

采用 css-ready base64 格式：

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==

http://polpo.org/blank.gif is a 37 byte transparent GIF made with gifsicle.

In css-ready base64 format:

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==

回复收藏 0 原文

楠木可依 2024-09-03 18:07:09

请参阅：http://www.google-analytics.com/__utm.gif, 35B
Perl 中的替代方案 (45B)：
<前><代码>##tinygif
## 世界上最小的 GIF
## 35 字节，如果透明则为 43
## 信用：http://www.perlmonks.org/?node_id=7974
使用严格；
我的（$红色，$绿色，$蓝色，$GHOST，$CGI）；
## 在这里调整颜色，从0-255
$红色 = 255；
$绿色= 0；
$蓝色= 0；
## 将 $GHOST 设置为 1 表示透明 gif，0 表示正常
$幽灵= 1；
## 如果写入网络浏览器，则将 $CGI 设置为 1，否则设置为 0
$CGI = 0;
$CGI && printf "内容长度: %d\n内容类型: 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

See: http://www.google-analytics.com/__utm.gif, 35B

Alternative in 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;

Run it ...

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

回复收藏 0 原文

无声情话 2024-09-03 18:07:09

透明点，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漏洞时代），我不记得来源了。我在此处找到了最新的一个。

PS：用于跟踪目的，而不是作为垫片。

Transparent dot, 43 bytes:

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

Orange dot, 35 bytes:

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

Without color table (possibly painted as black), 26 bytes:

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

The first two I found some time ago (in the times of timthumb vulnerability) and I don't remember the sources. The latest one I found here.

P.S.: Use for tracking purposes, not as spacers.

回复收藏 0 原文

是伱的 2024-09-03 18:07:09

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

使用CSS。

回复收藏 0 原文

檐上三寸雪 2024-09-03 18:07:09

我认为这是最难忘的 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 个字节您可以输入任何内容，浏览器可以解析它，

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

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

顺便说一句，如果您使用 /// 或 \\\ 在大小页面标题旁边的 3 个字节

将显示最后一个字符，否则将显示 gif,...

测试过 Chrome、Firefox 均有效，IE不起作用

I think this is most memorable 1x1 (38 bytes):

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

According to GIF header spec:

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>

First %01%00 is width = 0x0001

note that 1px is %01%00 equals to 0x0001

not %00%01 otherwise it will be 0x0100

Second is height, same as above

next 3 bytes you can input anything, browser can parse it

e.g. /// or !!! or ,,, or ;;; or +++

last one byte must be: ; , !

by the way, if you use /// or \\\ at the 3 bytes next to size

page title will display last character, otherwise will show gif,...

tested with Chrome, Firefox both worked, IE does not works

回复收藏 0 原文