Figure 9-14. The folder icon

Chapter 9 - Advanced Web Performance Optimization

The data: URI scheme is a way to embed "immediate data" as though it were included externally. Data URIs use the following syntax:

data:[<mediatype>][;base64],<data>

In the case of an image, you'd use a MIME type identifying the image (e.g., image/ gif) followed by a Base64 representation of the binary image. To create a Base64 representation of a binary image you can use the online data URL generator at http://www.sveinbjorn.org/dataurlmaker.

Here is an example:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//
ge8WSLf/rhf/3kdbW1mxsbP//mf///
yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORC
MxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16"
height="14" alt="embedded folder icon">

The resultant image is a folder icon (see Figure 9-14).

foldr icon from data uri

Figure 9-14. The folder icon

And the live example of an inline image:

embedded folder icon