Hardcoding Data Like Images and Sounds into HTML or CSS

Do you know Data URI scheme? With this, you can hardcode virtually any kind of digital information media into a document. Okay, "virtually any kind of" was a little bit unreasonable; "almost all browser-supported" is appropriate, such as images, sounds and movies.

The format below defines a data URI (we need to use safe URL characters; see also "Recommendations for Delimiting URI in Context" for delimiting a long URI):

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

URL is used to locate various resources, for example web browsers can't live without these URLs, and URI is a conceptual superset of URL. And protocols defined by data URI scheme provide a standardized way to hardcode certain data, such as JPEG, PNG, MP3, Ogg etc.


With this scheme we can hardcode data inside virtually all kinds of source code from interpreted languages like HTML, XML, CSS, JS, Ruby, PHP or even from compiled languages like C, C++, Java, Haskel. To enjoy the outcome of this scheme, we require an interpreter or compiler that can handle the scheme.

Fortunately, it seems famous web browsers already support this scheme, we can use the scheme in HTML and CSS.

---

Examples

I didn't know this scheme until yesterday. Hmm, this is interesting.

The image below is hardcoded inside this post with Base64 encoding (Base64 is often used in Internet-related applications like mailer).

Base64 Hardcoded PNG image

<img alt="Oops, this image file is beyond my ability!" 
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAA
AAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3
QoXFDANX9KTNAAAAxBJREFUKM8FwdFP4gYcAOBfa1ugV5CWCjqVqZHpM
FZdkJ6ZvdN4l8gu2cPkwvmgL75ue94ZH8YlxmOPJrtsZjn/BG9bXHaXP
Ymb00CmqEjmrkhlh04RxLa0FGTfh/R7uWF+WFVUk8mEYZiqqmazGQBwA
q/XQVUV0kLGYjHDMGRZua3VME3TMyeZL778vLm5xdCN2dnZ1vdaAYX7Y
/cGBwcLhaLDwVxd5dd/Wdd0rdFqR6c+m3I1OwOfBN7vcL9cfXlxebH5Z
3Tzjyhlpfy8X69oF5f/ZU4ztsZGAMBxAt3d3b3LjxAEId/I8XjcbqMJz
NTd3T05Oel2u8/OziKRb+bn58fuj7mcLZdXFw3kHYvPN/z2WHz69Kvjf
46vS9eVWuWmdPNv9h3eQHi93pUfVl7/+vrBw4dcf//u3h7a0dnh8Xzw/
PnS1vYWAoiDcUC9fluv//jzq7m5uRZXc2AyUC6XKxX9Fmq6rqHJZPLw8
OAOSQGA7yPf99+t3Pt4jGVYgjCpmmq1NVoslpmZGZqmQ6EnHMdhsiwXr
guPPg3sHf71+Mnjn9ZfZd9JL158u72zncuduVzOslLOiJKUlsLhsGEYq
MfjaWpi+bu83W7PX12++e2NmBYTB4nSTYkb6Jdl+SiZ2tyKaro+Pj6O4
zg2OjqaTCYXFxfr9Xo2m3U2Ob0fejVN6+npWV1d3dz4PfV3CgHETJqHh
gZZlsV2dnbS6fT5+XkoFAoGgxRFFQqFk5MThmHS6XQikWhAURQl2lvdJ
EkeHR012Gy2QCAQj8dlWY5Go2tra7lcTlXV/f3909NTHMertZpvaDgYn
DpI7ouiiObzeUEQurq6JEkaGBhYWlrieT6fz2cyGYqirFYrABA4YVSMW
CwmCAL4/f7l5WWe51mWpWkaQRAAAAAMw6anp9va2gDg2dfPUqnUxMQEA
CAmk0kQBJIkBUHgOC4SiRSLRUVRwuHwyMhIb29vZ2dnX1+foigbGxscx
yELCwvFYrG9vd3hcFAUVSqVqtUqANA0Xa1WJUliGEYURbvdDgAWi+V/M
O1pcI1WcmIAAAAASUVORK5CYII=" 
style="margin-left: auto; margin-right: auto;" />

<img> tag of above image

And in fact, the logo of Mac OS X Mavericks in the previous post was also hardcoded using this scheme. I learned its existence from this image.
You can put data other than images. Here is an MP3 sound data with Base64 encoding (a water drop sound).

Base64 Hardcoded MP3 sound (courtesy of http://www.freesfx.co.uk)

But data hardcoding is basically the same as putting the whole chunk of data into a URI string, and that URI part will be quite lengthy. I wouldn't recommend that for casual uses, HTML or whatever your code will get human-unfriendly unless data is fairly small.

Nonetheless, here's the last example: an ASCII hardcoded XBM image. I think Safari and Opera users can view this archaic image format. Chrome and IE10, to no avail :P .

ASCII Hardcoded XBM image