最小的数据URI透明图像是什么？

Question

我正在使用一个背景图片为透明的 1x1 图片来支持使用雪碧图并为一些图标提供替代文本。

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

我意识到我可以使用数据 URI 来代替雪碧图中的实际图片，但是将所有内容都保存在 CSS 中比分散落在各处更容易维护。

- Jacob Rask

---

使用一个实际的1x1图像并设置缓存，这样不是更好吗？您不需要更多的HTTP请求，并且在总数据开销中，图像的URL可能比78字节的数据URI更小。 - Redzarf

@Redzarf：实际上，可能并不会更好。小的、很少变化的资源影响页面加载时间，并不是因为文件大小，而是因为 HTTP 请求的往返。另一个微妙之处在于，大多数浏览器对缓存 CSS 比其他资源更为积极，所以浏览器更新 css（和嵌入的内容）的实验性尝试较少，节省了更多的 HTTP 往返。 - SingleNegationElimination

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。这会导致在多个浏览器中出现错误。

---

- Layke

---

+1 谢谢！我注意到这非常方便。我使用了你的数据来创建这个插件，所以我可以原生地使用响应式类型的图片，并带有背景覆盖或包含-> https://github.com/sebringj/jquery-transparent-gif/blob/master/README.md - King Friday

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

经过很多痛苦，我实际上发现“较短”的版本在我的网站上的某些（而不是所有）页面上，在旧版Android浏览器（HTC One S，OS 4.1）上会导致浏览器崩溃。 - WebSeed

回答很好，但到目前为止不是最小的。 - vhs

Answer 2

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

最终的长度取决于它被压缩后的情况。

- Adria

---

使用SVG有没有任何争议？有没有不适合使用的情况？ - tremby

SVG在许多情况下都很好，但是当与width: auto;结合使用时，SVG将采用其父级的宽度。当给定固定高度和宽度自动的静态图像（如GIF或PNG）时，将保留其纵横比。 - snazzybouche

我在一些浏览器上遇到了问题，尤其是移动版Safari。 - jjxtra

Answer 3

最小的PNG - 114字节：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

- joshcarr

---

值得一提的是，使用 GIMP 可以轻松生成此文件。生成的文件大小为 68 字节（目前为止最小的）。 - Ismael Miguel

使用Leanify优化后，1x1空画布的toDataURL('image/png')结果为67字节文件，尽管其base64 URI与此答案中的长度相同："data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR42mMAAQAABQABoIJXOQAAAABJRU5ErkJggg=="。 - f2d

Answer 4

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

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

使用dopiaza.org data:URI生成器生成。

- KARASZI István

Answer 5

您可以尝试以下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中优化SVG
• SVG的URL编码器 (GitHub) / SVG CSS URI - 优化替换工具

- kenorb

---

可以将 May、also、be 和 encoded 进行编码，并在网站图标或 CSS 的 content 属性中使用。 - vhs

有任何可能的缺点吗？ - BBaysinger

Answer 6

这个人通过GIF规范分解问题。他对于transparent.gif的解决方案只需37字节：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

他进一步缩小图像，先去除透明度，然后再去除颜色表...

---

GIF89a规范

• Header（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。

- mckamey

---

根据该文章，37字节的变体依赖于未定义的行为，实际上作者提到WordPress的图像解析器无法处理它。虽然它在大多数浏览器上可能有效，但我认为这是一种冒险的选择。我建议使用同一篇文章中的43字节变体。那篇文章的一个变体已经发布在上面的链接里。此外，请参阅“置顶答案”评论中的讨论。 - Brian

Answer 7

我找到的最小的代码（26字节）如下：

。

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

- KarasQ

---

在IE11中这个显示为黑色。 - tomasz86

除此之外，这在其他浏览器中也能正常工作吗？ - jjxtra

不透明，它显示为白色。 - jjxtra

不透明，它显示为白色。 - jjxtra

Answer 8

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

- Jurgis

---

Firefox 44和Internet Explorer 11显示img alt标签。您必须使用其中之一或删除alt标签。 - PersyJack

这比请求/响应图像更高效吗？ - nu everest

无法验证 - lucian

Answer 9

您可以使用

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

- DEV Tiago França

Answer 10

我在谷歌上搜索了最小的Base 64视频，但除了这个帖子外什么都没有找到，所以我自己制作了一个：

这是一个1.5 kB的20×20 mp4视频。

data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAtJtZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE2NCByMzEwMyA5NDFjYWU2IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAyMiAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTEgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTIzLjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAVZYiEABX//vfJ78Cm6/X2tb9gAQD5AAADBm1vb3YAAABsbXZoZAAAAADgYBEw4GARMAAAA+gAAAPoAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIwdHJhawAAAFx0a2hkAAAAA+BgETDgYBEwAAAAAQAAAAAAAAPoAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAUAAAAFAAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAABAAAD6AAAAAAAAQAAAAABqG1kaWEAAAAgbWRoZAAAAADgYBEw4GARMAAAQAAAAEAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAAVNtaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAETc3RibAAAAK9zdHNkAAAAAAAAAAEAAACfYXZjMQAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAUABQASAAAAEgAAAAAAAAAARVMYXZjNTkuNTYuMTAwIGxpYngyNjQAAAAAAAAAAAAAABj//wAAADVhdmNDAWQAM//hABhnZAAzrNlJeeeEAAADAAQAAAMACDxgxlgBAAZo6+PLIsD9+PgAAAAAFGJ0cnQAAAAAAAAWUAAAFlAAAAAYc3R0cwAAAAAAAAABAAAAAQAAQAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAACygAAAAEAAAAUc3RjbwAAAAAAAAABAAAAMAAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTkuMzUuMTAw

我知道这个答案并不完全回答你的问题，但我希望它能帮助到那些寻找最小视频可能性的人。

- Alejandro Akbal