Smallest data URI image possible for a transparent image
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=