What is the purpose of data URIs?

Question

Why are resources sometimes embedded in data URIs, rather than using a regular URI that links to a resource stored as a file on a server?

Answer 1

1. Reducing server requests

Data URIs can be used to decrease server load and improve client performance, by reducing the number of HTTP requests required to acquire resources. For example, this HTML:

<img src="assets/bullet.png">

... can be replaced with this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA
  ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5
  o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9
  D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3
  pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj
  eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38
  k6jyMAAAAASUVORK5CYII="
>

... to produce an image like this: with one fewer HTTP request.

Note: it appears to be impossible to embed data URI images in a Stack Overflow post; however, the image above was uploaded to an image hosting service using the data URI shown.

If, for example, your site uses many small icons, specifying them all as data URIs in a stylesheet:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) }
.icon-bullet-green { background-image: /* ... */ }
.icon-save { background-image: /* ... */ }
.icon-load { background-image: /* ... */ }
.icon-delete { background-image: /* ... */ }
/* ... etc. */

... can eliminate a large number of HTTP requests, at the cost of overall download size, legibility, and an increased likelihood that a bad edit might render the URI nonsensical (and difficult to fix).

An alternative method to achieve the same result for images is the use of CSS sprites.

2. Embedding content in a single file

A data URI can be used to contain all of the resources required to correctly display a page in a single document. This may be useful in e.g. a README file distributed alongside a piece of software. In theory, data URIs could also be used as an alternative to the use of attachments to embed resources in HTML email, but in practice client support for data URIs is too unreliable for this to be a useful technique.

3. Avoiding browser warnings

Some browsers display a warning if a page contains content served over a mixture of HTTP and HTTPS. If your server is set up so that static content like images is typically served over HTTP, but dynamic content is served over HTTPS, embedding that static content with a data URI is a possible workaround.

Answer 2

In addition to the previous answer (which is a very good summary), one thing I've been using this for lately is fonts. If I need to use just a small subset of characters from a font (say, a design-y font for a logo, or a special dingbat bullet icon), I can encode just the characters I need into a CSS @font-face declaration and not make the user download the entire font file.

For example, if I only want the devil (d) and angel (e) faces from Eggfaces ( http://www.dingbatdepot.com/details/EggfacesTFB ) , then I can use FontSquirrel's webfont generator tool ( http://www.fontsquirrel.com/tools/webfont-generator ) to create something like this:

@font-face {
    font-family: 'eggfaces';
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff');
    font-weight: normal;
    font-style: normal;
}

See this fiddle for an example: http://jsfiddle.net/vuuVh/