Data Image Used as a Placeholder for Spacing

A data image is like inline css, it loads with the page. The advantage is that it does not require any server resources. The browser processes the image as soon as the page is loaded. No need to upload a tiny image spacer, just use the code below.

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

Example:

HTML code for a blank image 60 x 40:
<img style="margin-left:20px;height:40px;width:60px;border:1px silver solid;border-radius:4px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Produces the result:

Possible uses:

  1. Use the data-image as a link to overlay on top of other html elements to make a block of space act as a hyper link.
  2. Use it to overlay html elements using style position absolute to prevent selecting them for whatever reason.
  3. Use it as a spacer to simplify spacing if using css spacing becomes to cumbersome.
  4. Use it as a placeholder before other AJAX data has loaded into the div. This will allow the page spacing to be defined right away and help prevent the jumping that happens as data loads in to elements in a page.