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

回答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.

回答2:

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

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

回答3:

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.

回答4:

Smallest PNG - 114 bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

回答5:

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.

回答6:

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

回答7:

This is the smallest I found (26 bytes):

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

回答8:

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

回答9:

For empty image :

data:null

(it will translate into src=(unknown) )

来源：https://stackoverflow.com/questions/6018611/smallest-data-uri-image-possible-for-a-transparent-image

标签

css

css-sprites