Base64 Encode for 1x1px Transparent GIF image

The data URI for a white transparent image is

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

This data scheme will give a 1×1 px gif image which can be used as overlays or empty space fillers

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="400px" height="400px" />

This can also be used in CSS as background image.

div{
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

The data URI for the black one is,

data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=

The Base64 encoder tool #

There is an online tool to convert to any image to this Base64 format. The tool is in http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

Resources #

• Data URIs
• Why use data URI scheme?