最小数据URI图像可能用于透明图像 [英] Smallest data URI image possible for a transparent image

问题描述

我使用带有背景图片的透明1x1图片，以便能够使用精灵，并仍然为某些图标提供替代文字。

我想使用图片的数据URI，以减少HTTP请求的数量，但将产生透明图片的最小可能字符串？

我想使用数据URI：s作为实际图片而不是精灵，但是当一切都保存在CSS而不是分散时，用不同的透明GIF播放后，有些是不稳定的，引起CSS毛刺。例如，如果你有一个< img> 并且你使用最小的透明GIF可能，但它工作正常，但是，如果你想要你的透明GIF有一个 background-image ，那么这是不可能的。由于某些原因，某些GIF（例如以下）会阻止CSS背景（在某些浏览器中）。

较短（但不稳定）

  data：image / gif; base64，R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw == 
  

我建议使用稍长，稳定版本如下：

⇊稳定⇊（但稍长）

  data：image / gif; base64，R0lGODlhAQABAIAAAAAAAP /// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 
  

---

作为另一个提示，不要像一条评论所示那样忽略 image / gif 。这将打破在几个浏览器。

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.

解决方案

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).

Shorter (but unstable)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

⇊ Stable ⇊ (but slightly longer)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

---

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

这篇关于最小数据URI图像可能用于透明图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！