Smallest data URI image possible for a transparent image

Question

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.

Gearard

Wouldn't it be better to use an actual 1x1 image, with caching setup? You don't have more http requests, and in total data overhead the url to the image could be smaller than the 78 bytes of data URI. – Cantone

@Redzarf: actually, no it probably would not be better. small, rarely changing resources affect page load times not because of file size but because of the round trip of an HTTP request. Another subtlety is that most browsers are much more agressive about caching CSS than other resources, so the browser is less likely to experiment with refreshing css (and content thus embedded), saving more http round trips. – Axenic

Answer 1

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.

Luthanen

+1 thanks! I noticed this comes in handy. I used your data to create this plugin so I can use responsive type images natively with background cover or contain-> github.com/sebringj/jquery-transparent-gif/blob/master/… – Bangle

Why is the shorter one "unstable"? I see that it does occasionally cause a black image, I'm just curious if anyone knows why. – Bufford

After a lot of pain I've actually found that the "shorter" version was actually crashing the browser on some (not all) pages on my site on older Android browsers (HTC One S, OS 4.1). – Grossman

Great answer but not the smallest possible so far. – Tint

Answer 2

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

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

Mirabelle

Are there any arguments against using an SVG? Any cases where it's not a good idea? – Jaundice

An SVG is fine for many cases, but when combined with width: auto;, an SVG will take on the width of its parent. A static image such as GIF or PNG, when given a fixed height and width auto, will retain its aspect ratio. – Distributive

I've had some issues in some browsers, especially mobile safari – Bitter

Answer 3

Smallest PNG - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Hypergolic

It's worth mentioning that this is easily generatable using GIMP. The resulting file will have a size of 68 bytes (the smallest possible, so far). – Hf

Result of 1x1 empty canvas.toDataURL('image/png') optimized with Leanify gives a 67 bytes file, although its base64 URI is the same length as in this answer: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR42mMAAQAABQABoIJXOQAAAABJRU5ErkJggg==" – Mer

Answer 4

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

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

Generated with dopiaza.org data:URI generator.

Bursarial

Answer 5

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

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

Standalone svg file would look like (62 bytes):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

See also:

• Optimizing SVGs in data URIs
• Url encoder for SVG (GitHub) / SVG CSS URI — Optimized replacer

Boesch

May also be encoded and used in a favicon or CSS content property. – Tint

Any possible disadvantages whatsoever? – Untruth

Answer 6

This guy breaks down the problem via the GIF spec. His solution for the transparent.gif would be 37 bytes:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

He goes even smaller by first removing the transparency, then the color table...

---

GIF89a specification

• 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-encoded 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.

• GIF Trailer (1 byte)

  A single byte with a hex value of 3B (; in ASCII) indicates the end of the 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.

Source: The Tiniest GIF Ever.

Wilsey

Per that article, the 37 byte variation relies on undefined behavior, and in fact the author mentions that wordpress's image parser can't handle it. While it will probably work on most browsers, I'd consider it a risky choice. I'd stick with the 43 byte variation from that same article,. A variant of that is already posted above. See also discussion in the comments on the top answer – Illsorted

Answer 7

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

Abagael

Firefox 44 and Internet Explorer 11 show the img alt tag. You either have to use one of the above or remove the alt tag – Windup

This is more efficient that a request / response for an image? – Bologna

Won't validate though – Oralle

Answer 8

This is the smallest I found (26 bytes):

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

Semifluid

This comes up black in IE11. – Resiniferous

Besides i.e. this works in other browsers? – Bitter

Not transparent, it shows white – Bitter

Answer 9

You can use

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

or

  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Precast

Answer 10

I have searched on Google for the smallest video possible in Base 64, but found nothing besides this thread, so I made this myself:

It's a 1,5 kB 20×20 mp4 video

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

I know this answer is not completely related to the question, but I hope it can help someone looking for the smallest video possible

Nicholasnichole

Answer 11

For empty image :

data:null

(it will translate into src=(unknown) )

Ipomoea

I like this in principle, but w3c validator doesn't approve in practice: Error: Bad value data:null for attribute src on element img: Premature end of URI. – Willumsen

Answer 12

BMP - 1x1 RGBA (transparent) - based on this - 194 bytes

data:image/bmp;base64,Qk1xAAAAAAAAAHsAAABsAAAAAQAAAAEAAAABACAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAD/AAD/AAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ==

inside java-script it can be compressed to 106 bytes

"data:image/bmp;base64,Qk1x"+"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))

let s = "data:image/bmp;base64,Qk1x"+"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))


console.log(s);

Sequestration

Compressed to 106 bytes, but the chief answer on this question claims 78 bytes. – Orsay

@Orsay you are right - it is not shortest answer - I left the answer so that future readers have a wider choice of formats – Cheque

there is a 30 bytes bmp, but is in red. any chance to make it transparent? github.com/mathiasbynens/small/blob/master/bmp.bmp – Xylo