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.

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. — Redzarf, Apr 13 '13 at 11:16
@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. — SingleNegationElimination, Apr 02 '14 at 23:27

score 215 · Accepted Answer · edited Nov 16 '17 at 17:40

215

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.

edited Nov 16 '17 at 17:40

KARASZI István

30,900
8
101
128

answered Oct 30 '12 at 13:16

Layke

51,422
11
85
111

1

+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-> https://github.com/sebringj/jquery-transparent-gif/blob/master/README.md – King Friday Sep 05 '14 at 20:06
2

Why is the shorter one "unstable"? I see that it does occasionally cause a black image, I'm just curious if anyone knows why. – Jerod Venema Dec 09 '15 at 18:05
1

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). – WebSeed Feb 01 '16 at 11:47
1

Great answer but not the [smallest possible](https://stackoverflow.com/a/26896684/712334) so far. – vhs Jan 28 '19 at 01:45

score 33 · Answer 2 · edited Nov 24 '16 at 00:36

33

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

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

edited Nov 24 '16 at 00:36

Walf

8,535
2
44
59

answered Nov 12 '14 at 21:14

Adria

8,651
4
37
30

4

Are there any arguments against using an SVG? Any cases where it's not a good idea? – tremby Jun 28 '17 at 21:19
1

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. – snazzybouche Jan 08 '20 at 21:02
I've had some issues in some browsers, especially mobile safari – jjxtra Jan 31 '23 at 21:19

score 29 · Answer 3 · edited Nov 16 '17 at 17:41

29

Smallest PNG - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

edited Nov 16 '17 at 17:41

KARASZI István

30,900
8
101
128

answered Apr 13 '16 at 21:46

joshcarr

453
5
7

1

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). – Ismael Miguel Sep 19 '16 at 16:51
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==" – f2d May 30 '21 at 06:27

score 20 · Answer 4 · edited Nov 08 '17 at 16:54

20

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.

edited Nov 08 '17 at 16:54

kenorb

155,785
88
678
743

answered May 16 '11 at 14:12

KARASZI István

30,900
8
101
128

kenorb · Answer 5 · 2019-01-28T13:36:34.900

17

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

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.

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](http://stackoverflow.com/a/6018673/18192). See also discussion in the comments on the [top answer](http://stackoverflow.com/a/13139830/18192) — Brian, Dec 16 '16 at 18:58

score 5 · Answer 7 · answered Jul 24 '15 at 11:42

5

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

answered Jul 24 '15 at 11:42

Jurgis

51
1
2

1

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 – PersyJack Mar 18 '16 at 20:41
This is more efficient that a request / response for an image? – nu everest Mar 15 '18 at 17:17
1

Won't validate though – lucian Nov 12 '19 at 16:18

score 5 · Answer 8 · answered Nov 06 '15 at 17:18

5

This is the smallest I found (26 bytes):

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

answered Nov 06 '15 at 17:18

KarasQ

378
3
10

1

This comes up black in IE11. – tomasz86 May 05 '16 at 18:25
Besides i.e. this works in other browsers? – jjxtra Jan 31 '23 at 21:03
Not transparent, it shows white – jjxtra Jan 31 '23 at 21:20

score 1 · Answer 9 · answered Aug 19 '22 at 18:18

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

T.Todua · Answer 10 · 2018-07-09T06:59:48.807

0

For empty image :

data:null

(it will translate into src=(unknown) )

edited Jul 09 '18 at 06:59

answered Jul 07 '18 at 10:20

T.Todua

53,146
19
236
237

2

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. – brennanyoung May 27 '20 at 15:02

Kamil Kiełczewski · Answer 11 · 2021-07-05T21:42:09.497

0

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

edited Jul 05 '21 at 21:42

answered Jul 05 '21 at 21:32

Kamil Kiełczewski

85,173
29
368
345

Compressed to 106 bytes, but the chief answer on this question claims 78 bytes. – Martin Jul 05 '21 at 21:45
1

@Martin you are right - it is not shortest answer - I left the answer so that future readers have a wider choice of formats – Kamil Kiełczewski Jul 05 '21 at 21:46
there is a 30 bytes bmp, but is in red. any chance to make it transparent? https://github.com/mathiasbynens/small/blob/master/bmp.bmp – Kirby Wu Nov 13 '21 at 01:20

score 0 · Answer 12 · answered Apr 15 '23 at 08:49

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

Smallest data URI image possible for a transparent image

12 Answers12

⇊ Stable ⇊ (but slightly longer - 78 bytes)

GIF89a specification

Linked

Related