Smallest data URI image possible for a transparent image

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 p开发者_如何学Cossible 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 - 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.

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

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

Smallest PNG - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

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.

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

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.

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

This is the smallest I found (26 bytes):

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

For empty image :

data:null

(it will translate into src=(unknown) )

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

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