CSS 透明图像可能的最小数据 URI 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6018611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smallest data URI image possible for a transparent image
提问by Jacob Rask
I'm using a transparent 1x1 image with a background image, to be able to use sprites and still provide alternative text for some icons.
我正在使用带有背景图像的透明 1x1 图像，以便能够使用精灵并仍然为某些图标提供替代文本。
I want to use a data URI for the image to reduce the number of HTTP requests, but what would be the smallest possible string to produce a transparent image?
我想使用图像的数据 URI 来减少 HTTP 请求的数量，但是生成透明图像的最小字符串是多少？
I realize I could use data URI:s for the actual images instead of sprites, but it's easier to maintain when everything is kept in the CSS instead of scattered around.
我意识到我可以将数据 URI:s 用于实际图像而不是精灵，但是当所有内容都保存在 CSS 中而不是分散在各处时，它更容易维护。
回答by Layke
After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img>and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image, then this is impossible. For some reason, some GIFs such as the following prevent CSS backgrounds (in some browsers).
在使用不同的透明 GIF 后，有些不稳定并导致 CSS 故障。例如，如果您有一个<img>并且您使用最小的透明 GIF，它可以正常工作，但是，如果您希望透明 GIF 有一个background-image，那么这是不可能的。出于某种原因，某些 GIF 如下所示会阻止 CSS 背景（在某些浏览器中）。
Shorter (but unstable - 74 bytes)
更短（但不稳定 - 74 字节）
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
I would advise using the slightly longer and more stable version as follows:
我建议使用稍长且更稳定的版本，如下所示：
? Stable ? (but slightly longer - 78 bytes)
? 稳定的 ？（但稍长 - 78 字节）
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
As another tip, don't omit image/gifas one comment suggests. This will break in several browsers.
作为另一个提示，不要image/gif像一个评论建议的那样省略。这将在多个浏览器中中断。
回答by Adria
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E
The final length depends on what it's gzipped with.
最终长度取决于它的 gzip 压缩包。
回答by KARASZI István
I think it must be a compressed transparent 1x1 GIF file (82 bytes):
我认为它必须是一个压缩的透明 1x1 GIF 文件（82 字节）：
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
Generated with dopiaza.org data:URI generator.
回答by joshcarr
Smallest PNG - 114 bytes:
最小的 PNG - 114 字节：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
回答by mckamey
This guybreaks down the problem via the GIF spec. His solution for the transparent.gifwould be 37 bytes:
这家伙通过 GIF 规范分解了问题。他的解决方案transparent.gif是 37 个字节：
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
He goes even smaller by first removing the transparency, then the color table...
他通过首先移除透明度，然后是颜色表来变得更小......
GIF89a specification
GIF89a 规范
Header(6 bytes)
Consists of the bytes “GIF” and the version number, which is usually
89a.Logical Screen Descriptor(7 bytes)
Without going into too much detail, this section of the file indicates the following:
- The file is 1x1 pixels in size.
- There is a global color table.
- There are 2 colors in the global color table, the second one should be used as the background color.
Global Color Table(6 bytes)
Consists of 3 bytes per color, a byte for red, green, and blue, respectively. In our file, the first color is white an the second color is black.
Graphic Control Extension(8 bytes)
Used to indicate that the second color in the color table should be treated as transparent (can also be used for animation parameters, but isn't in this file).
Image Descriptor(10 bytes)
A GIF file can actually contain multiple “images” within it, which keeps you from having to specify image data for parts of the image which have the same color as the background color. Each image block has a position and size within the overall image size. In the above file, the position is 0,0 and the size is 1x1.
Image Data(5 bytes)
One LZW-encodedblock of image data. It takes 5 bytes to represent the single pixel the image has in it. The compression algorithm wasn't designed to compress a single byte very well.
GIF Trailer(1 byte)
A single byte with a hex value of
3B(;in ASCII) indicates the end of the GIF.
标头（6 个字节）
由字节“GIF”和版本号组成，通常是
89a.逻辑屏幕描述符（7 字节）
在不涉及太多细节的情况下，文件的这一部分表明了以下内容：
- 文件大小为 1x1 像素。
- 有一个全局颜色表。
- 全局颜色表中有 2 种颜色，应使用第二种颜色作为背景色。
全局颜色表（6 字节）
每种颜色由 3 个字节组成，分别为红色、绿色和蓝色一个字节。在我们的文件中，第一种颜色是白色，第二种颜色是黑色。
图形控制扩展（8 字节）
用于指示颜色表中的第二种颜色应视为透明（也可用于动画参数，但不在此文件中）。
图像描述符（10 字节）
一个 GIF 文件实际上可以在其中包含多个“图像”，这样您就不必为与背景颜色具有相同颜色的图像部分指定图像数据。每个图像块在整个图像大小内都有一个位置和大小。在上面的文件中，位置为 0,0，大小为 1x1。
图像数据（5 字节）
一个LZW 编码的图像数据块。表示图像中的单个像素需要 5 个字节。压缩算法的设计目的不是很好地压缩单个字节。
GIF 预告片（1 字节）
具有十六进制值
3B（;在 ASCII 中）的单个字节表示 GIF 的结尾。
Based on the required structures for a transparent GIF, it turns out that 43 bytes is pretty close to as small as you can get.
But, I managed to figure out one trick to make it a bit smaller. It's mentioned in the standard that it is optional to have a global color table. Of course, it's undefined as to what happens when you make a GIF without a color table at all.
When you have a color table index defined as transparent, however, GIF decoders don't seem to care that there isn't actually a color table.
So I changed the logical screen descriptor to indicate there was no global color table and removed the table itself, saving a total of six bytes, bringing the file size down to a mere 37 bytes.
Interestingly enough, Wordpress gave me a lovely list of error messages of GD complaining that this isn't a valid GIF file, despite the fact that Firefox and the GIMP both open and display (is it “displayed” when it's transparent?) the file just fine.
To make it even smaller, I looked to the biggest remaining “optional” block in the image, the graphic control extension. If you don't need transparency, this block is no longer needed, and that's another 8 bytes you can take away.
根据透明 GIF 所需的结构，结果证明 43 字节非常接近您所能获得的最小大小。
但是，我设法想出了一个技巧，让它变小一点。标准中提到有一个全局颜色表是可选的。当然，当你在没有颜色表的情况下制作 GIF 时会发生什么是不确定的。
但是，当您将颜色表索引定义为透明时，GIF 解码器似乎并不关心实际上没有颜色表。
因此，我更改了逻辑屏幕描述符以指示没有全局颜色表并删除了表本身，总共节省了 6 个字节，使文件大小减少到仅 37 个字节。
有趣的是，Wordpress 给了我一个可爱的 GD 错误消息列表，抱怨这不是有效的 GIF 文件，尽管事实上 Firefox 和 GIMP 都打开并显示（透明时是否“显示”？）该文件正好。
为了使它更小，我查看了图像中最大的剩余“可选”块，图形控件扩展。如果您不需要透明度，则不再需要此块，并且您可以带走另外 8 个字节。
Source: The Tiniest GIF Ever.
来源：有史以来最小的 GIF。
回答by kenorb
You can try the following SVG data (60 bytes):
您可以尝试以下 SVG 数据（60 字节）：
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
Standalone svg file would look like (62 bytes):
独立的 svg 文件看起来像（62 字节）：
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>
See also:
也可以看看：
回答by KarasQ
This is the smallest I found (26 bytes):
这是我发现的最小的（26 字节）：
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
回答by Jurgis
I'm using following data uri to get an empty image: //:0
我正在使用以下数据 uri 获取空图像： //:0
回答by T.Todua
For empty image :
对于空图像：
data:null
(it will translate into src=(unknown))
（它会翻译成src=(unknown)）
