blocks|key|2577223|text|在使用不同的透明GIF之后，有些是不稳定的，并导致CSS故障。例如，如果您有一个<img>，并且您使用了最小的透明GIF，那么它可以很好地工作，但是如果您想要您的透明GIF有一个background-image，那么这是不可能的。由于某些原因，一些GIF(如以下所示)会阻止CSS背景(在某些浏览器中)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2577224|更短(但不稳定-+74字节)|BOLD|2577225|data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==|code-block|syntax|javascript|2577226|我建议使用稍长和更稳定的版本如下：|2577227|⇊稳定⇊(但略长-78个字节)|2577228|data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7|2577229|另一条建议是，不要像一条评论所暗示的那样忽略image/gif。这将在几个浏览器中破坏。|2577230|entityMap^0|14|5|2H|G|0|0|E|0|0|0|0|F|0|0|0|18|M|9|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|15|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|17|8|@$9|18|A|19|B|H]]|D|@]|E|$]]|$1|R|3|S|5|K|7|1A|8|@]|D|@]|E|$L|M]]|$1|T|3|U|5|6|7|1B|8|@$9|1C|A|1D|B|H]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|W|$]]

After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <code>&lt;img&gt;</code> and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a <code>background-image</code>, then this is impossible. For some reason, some GIFs such as the following prevent CSS backgrounds (in some browsers). 

Shorter (but unstable - 74 bytes)

<pre><code>data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
</code></pre>

I would advise using the slightly longer and more stable version as follows:

<h2>⇊ Stable ⇊ (but slightly longer - 78 bytes)</h2>

<pre><code>data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
</code></pre>

<hr>

As another tip, don't omit <code>image/gif</code> as one comment suggests. This will break in several browsers.

blocks|key|2577232|text|data:image/svg%2Bxml,%253Csvg+xmlns='http://www.w3.org/2000/svg'/%253E|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2577233|最后的长度取决于它使用的是什么。|unstyled|2577234|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

The final length depends on what it's gzipped with.

blocks|key|2577389|text|最小的PNG+-+114字节：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2577390|data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=|code-block|syntax|javascript|2577391|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Smallest PNG - 114 bytes:

<pre><code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
</code></pre>

blocks|key|2935767|text|我认为它必须是一个压缩透明的1x1GIF文件(82个字节)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2935768|data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==|code-block|syntax|javascript|2935769|用dopiaza.org数据:URI生成器生成。|offset|length|2935770|entityMap|0|LINK|mutability|MUTABLE|url|http://www.dopiaza.org/tools/datauri/^0|0|0|1|K|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I think it must be a compressed transparent 1x1 GIF file (82 bytes):

<pre><code>data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
</code></pre>

Generated with <a href="http://www.dopiaza.org/tools/datauri/" rel="noreferrer">dopiaza.org data:URI generator</a>.

blocks|key|2935954|text|您可以尝试以下SVG数据(60个字节)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2935955|data:image/svg%2Bxml,<svg+xmlns="http://www.w3.org/2000/svg"/>|code-block|syntax|javascript|2935956|独立的svg文件看起来应该是(62个字节)：|2935957|<?xml+version="1.0"?><svg+xmlns="http://www.w3.org/2000/svg"/>|2935958|另请参阅：|2935959|数据URI中SVGs的优化|unordered-list-item|offset|length|2935960|SVG的Url编码器+(GitHub)+/+SVG+CSS+URI+-优化替换程序|2935961|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/tigt/post/optimizing-svgs-in-data-uris|1|http://yoksel.github.io/url-encoder|2|https://github.com/yoksel/url-encoder/|3|https://codepen.io/tommiehansen/full/RaXZzW/^0|0|0|0|0|0|0|D|0|0|0|A|1|C|6|2|M|J|3|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@$P|1D|Q|1E|1|1F]]|A|$]]|$1|R|3|S|5|O|7|1G|8|@]|9|@$P|1H|Q|1I|1|1J]|$P|1K|Q|1L|1|1M]|$P|1N|Q|1O|1|1P]]|A|$]]|$1|T|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]|11|$5|W|X|Y|A|$Z|12]]|13|$5|W|X|Y|A|$Z|14]]|15|$5|W|X|Y|A|$Z|16]]]]

You can try the following SVG data (60 bytes):

<pre><code>data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg"/&gt;
</code></pre>

Standalone svg file would look like (62 bytes):

<pre><code>&lt;?xml version="1.0"?&gt;&lt;svg xmlns="http://www.w3.org/2000/svg"/&gt;
</code></pre>

See also:

<ul>
<li><a href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris" rel="noreferrer">Optimizing SVGs in data URIs</a></li>
<li><a href="http://yoksel.github.io/url-encoder" rel="noreferrer">Url encoder for SVG</a> (<a href="https://github.com/yoksel/url-encoder/" rel="noreferrer">GitHub</a>) / <a href="https://codepen.io/tommiehansen/full/RaXZzW/" rel="noreferrer">SVG CSS URI — Optimized replacer</a></li>
</ul>

blocks|key|2577162|text|这家伙通过GIF规范解决了这个问题。他的transparent.gif解决方案将是37个字节：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2577163|data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==|code-block|syntax|javascript|2577164|他先去掉透明度，然后是彩色表，这样就更小了……|2577165|GIF89a规范|2577166|头(6个字节)
由字节“GIF”和版本号组成，版本号通常是89a。|unordered-list-item|BOLD|2577167|逻辑屏幕描述符(7个字节)
在不涉及太多细节的情况下，该文件的这一部分指示如下：|2577168|-+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.|2577169|全局颜色表(6个字节)
每种颜色由3个字节组成，红色、绿色和蓝色分别包含一个字节。在我们的文件中，第一种颜色是白色，第二种颜色是黑色。|2577170|图形控制扩展+(8字节)
用于指示颜色表中的第二种颜色应视为透明(也可用于动画参数，但不在此文件中)。|2577171|图像描述符+(10字节)
GIF文件实际上可以包含多个“图像”，这使得您不必为与背景色相同颜色的图像部分指定图像数据。每个图像块在整个图像大小中都有一个位置和大小。在上面的文件中，位置为0,0，大小为1x1。|2577172|图像数据(5个字节)
一个LZW编码块的图像数据。它需要5个字节来表示图像中的单个像素。压缩算法的设计并不能很好地压缩单个字节。|2577173|GIF拖车+(1字节)
十六进制值为3B+(ASCII中的;)的单个字节表示GIF的结束。|2577174|基于透明GIF所需的结构，结果显示43个字节非常接近于您所能得到的最小字节。
但是，我想出了一个办法让它变小一点。标准中提到，有一个全局颜色表是可选的。当然，当您在没有颜色表的情况下创建一个GIF时，它是没有定义的。
但是，当您将颜色表索引定义为透明时，GIF解码器似乎并不关心实际上没有颜色表。
因此，我更改了逻辑屏幕描述符，以指示没有全局颜色表，并删除了表本身，总共保存了6个字节，使文件大小降到了37个字节。
有趣的是，Wordpress给了我一个可爱的GD错误信息列表，抱怨这不是一个有效的GIF文件，尽管Firefox和GIMP同时打开和显示(当它是透明的时候它是否“显示”？)文件很好。
为了使它更小，我查看了图像中最大的剩余“可选”块，即图形控制扩展。如果不需要透明性，则不再需要这个块，这是另外8个字节。|blockquote|2577175|资料来源：有史以来最微小的GIF.|2577176|entityMap|0|LINK|mutability|MUTABLE|url|http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever|1|http://web.archive.org/web/20171107120106/http://en.wikipedia.org/wiki/Lempel-Ziv-Welch|2^0|K|F|0|3|0|0|0|0|0|0|1|T|3|0|0|7|0|0|0|5|0|0|6|0|0|5|0|0|4|D|5|1|0|0|5|I|2|T|1|0|0|5|B|2|0^^$0|@$1|2|3|4|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|F|3|G|5|H|7|1S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1T|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1U|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1V|8|@$9|1W|A|1X|B|R]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|S|3|T|5|Q|7|20|8|@$9|21|A|22|B|R]]|D|@]|E|$]]|$1|U|3|V|5|H|7|23|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|Q|7|24|8|@$9|25|A|26|B|R]]|D|@]|E|$]]|$1|Y|3|Z|5|Q|7|27|8|@$9|28|A|29|B|R]]|D|@]|E|$]]|$1|10|3|11|5|Q|7|2A|8|@$9|2B|A|2C|B|R]]|D|@]|E|$]]|$1|12|3|13|5|Q|7|2D|8|@$9|2E|A|2F|B|R]]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|14|3|15|5|Q|7|2J|8|@$9|2K|A|2L|B|R]|$9|2M|A|2N|B|C]|$9|2O|A|2P|B|C]]|D|@]|E|$]]|$1|16|3|17|5|18|7|2Q|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|2R|8|@]|D|@$9|2S|A|2T|1|2U]]|E|$]]|$1|1B|3|-4|5|6|7|2V|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I]]|1J|$5|1E|1F|1G|E|$1H|1K]]|1L|$5|1E|1F|1G|E|$1H|1I]]]]

<a href="http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever" rel="noreferrer">This guy</a> breaks down the problem via the GIF spec. His solution for the <code>transparent.gif</code> would be 37 bytes:
<pre><code>data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
</code></pre>
He goes even smaller by first removing the transparency, then the color table...
<hr />
<h3>GIF89a specification</h3>
<ul>
<li>Header (6 bytes)
<blockquote>
Consists of the bytes “GIF” and the version number, which is usually <code>89a</code>.
</blockquote>
</li>
<li>Logical Screen Descriptor (7 bytes)
<blockquote>
Without going into too much detail, this section of the file indicates the following:
<ul>
<li>The file is 1x1 pixels in size.</li>
<li>There is a global color table.</li>
<li>There are 2 colors in the global color table, the second one should be used as the background color.</li>
</ul>
</blockquote>
</li>
<li>Global Color Table (6 bytes)
<blockquote>
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.
</blockquote>
</li>
<li>Graphic Control Extension (8 bytes)
<blockquote>
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).
</blockquote>
</li>
<li>Image Descriptor (10 bytes)
<blockquote>
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.
</blockquote>
</li>
<li>Image Data (5 bytes)
<blockquote>
One <a href="http://web.archive.org/web/20171107120106/http://en.wikipedia.org/wiki/Lempel-Ziv-Welch" rel="noreferrer">LZW-encoded</a> block 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.
</blockquote>
</li>
<li>GIF Trailer (1 byte)
<blockquote>
A single byte with a hex value of <code>3B</code> (<code>;</code> in ASCII) indicates the end of the GIF.
</blockquote>
</li>
</ul>
<blockquote>
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.
</blockquote>
Source: <a href="http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever" rel="noreferrer">The Tiniest GIF Ever</a>.

blocks|key|2935988|text|这是我找到的最小的(26个字节)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2935989|data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=|code-block|syntax|javascript|2935990|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is the smallest I found (26 bytes):

<pre><code>data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
</code></pre>

blocks|key|2935970|text|我使用以下数据uri获取一个空映像：//:0|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2935971|entityMap^0|I|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I'm using following data uri to get an empty image: <code>//:0</code>

blocks|key|1380635|text|对于空图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1380636|data:null|code-block|syntax|javascript|1380637|(它将转化为src=(unknown)+)|offset|length|style|CODE|1380638|entityMap^0|0|0|6|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For empty image :

<pre><code>data:null
</code></pre>

(it will translate into <code>src=(unknown)</code> )

blocks|key|2577499|text|BMP+-+1x1+RGBA+(透明)-基于这+-+194字节|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2577500|data:image/bmp;base64,Qk1xAAAAAAAAAHsAAABsAAAAAQAAAAEAAAABACAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAD/AAD/AAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ==|code-block|syntax|javascript|2577501|在java脚本中，它可以压缩到106个字节。|2577502|"data:image/bmp;base64,Qk1x"%2B"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))|2577503|​|2577504|let+s+=+"data:image/bmp;base64,Qk1x"%2B"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))


console.log(s);|2577505|2577506|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/58163598/860099^0|0|3|M|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|S|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

BMP - 1x1 RGBA (transparent) - based on <a href="https://stackoverflow.com/a/58163598/860099">this</a> - 194 bytes
<pre class="lang-js prettyprint-override"><code>data:image/bmp;base64,Qk1xAAAAAAAAAHsAAABsAAAAAQAAAAEAAAABACAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAD/AAD/AAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ==
</code></pre>
inside java-script it can be compressed to 106 bytes
<pre class="lang-js prettyprint-override"><code>&quot;data:image/bmp;base64,Qk1x&quot;+&quot;9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==&quot;.replace(/\d/g,c=&gt;&quot;A&quot;.repeat(c))
</code></pre>
<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let s = "data:image/bmp;base64,Qk1x"+"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=&gt;"A".repeat(c))


console.log(s);</code></pre>
</div>
</div>

blocks|key|2936137|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2936138|data:null;,|code-block|syntax|javascript|2936139|<img+src="data:null;,"+alt="My+null+image">|2936140|<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;">|2936141|或|2936142|++<img+src="data:image/png;base64,+iVBORw0KGgoAAAANSUhEUgAAAAUA
++++AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
++++++++9TXL0Y4OHwAAAABJRU5ErkJggg=="+alt="Red+dot"+/>|2936143|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can use
<pre><code>data:null;,
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;data:null;,&quot; alt=&quot;My null image&quot;&gt;
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;data:null;,&quot; alt=&quot;My null image&quot; style=&quot;width: 100px;height: 10px;background: red;padding: 25px 16px;margin: 5px 15px;z-index: 5000;display: block ruby;&quot;&gt;
</code></pre>
or
<pre class="lang-html prettyprint-override"><code> &lt;img src=&quot;data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
 AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
 9TXL0Y4OHwAAAABJRU5ErkJggg==&quot; alt=&quot;Red dot&quot; /&gt;
</code></pre>

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.

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?

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.

Smallest data URI image possible for a transparent image

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用一个带有背景图像的透明1x1图像，以便能够使用精灵，并且仍然可以为一些图标提供替代文本。我想为图像使用一个数据URI来减少HTTP请求的数量，但是将是最小的字符串来生成透明的图像我意识到我可以使用数据URI:s来处理实际的映像而不是精灵，但是当所有东西都保存在CSS中而不是分散在各处时，维护起来就更容易了。

问可用于透明图像的最小数据URI映像
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可用于透明图像的最小数据URI映像EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可用于透明图像的最小数据URI映像
EN