Smallest data URI image possible for a transparent image

css css-sprites
Jacob Rask picture Jacob Rask · May 16, 2011 · Viewed 46k times · Source

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.

Answer

Layke picture Layke · Oct 30, 2012

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 - 74 bytes)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

⇊ Stable ⇊ (but slightly longer - 78 bytes)

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

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

Related questions

Can I add color to bootstrap icons only using CSS?

Twitter's bootstrap uses Icons by Glyphicons. They are "available in dark gray and white" by default: Is it possible to use some CSS trickery to change the colors of the icons? I was hoping for some other css3 brilliance that …

Read More
How can I scale an image in a CSS sprite

In this article, http://css-tricks.com/css-sprites/, it talks about how can I crop off a smaller image from 1 bigger image. Can you please tell me if it is possible/how I can crop off a smaller image and then …

Read More
Clip/Crop background-image with CSS

I have this HTML: <div id="graphic">lorem ipsum</div> with this CSS: #graphic { background-image: url(image.jpg); width: 200px; height: 100px;} The background image I'm applying is 200x100 px, but I only want to display …

Read More