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).

Oops, this image file is beyond my ability!
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 .

Oops, this image file is beyond my ability!
ASCII Hardcoded XBM image

Comments

Post a Comment

Popular posts from this blog

Make It Work: Global .gitattributes

-
Image
Git is the vanguard of distributed VCSs, and as a matter of course, it provide a way to perform diff or merge on certain files while intermediately treating them as documents of a certain other format. By reflecting appropriate changes to configuration and attributes of git as described in " Git - Git Attributes ," you can set up this intermediate conversion for files of your choice while in diff or merge process. This is best described with an example. Say, there exists a file format called "property list" (hereinafter plist) in Mac, and it can come in 3 forms: XML, binary or JSON (it's not exactly JSON, but is similar to it). To perform diff or merge on files of this type in a consistent way, use command plutil  provided by Mac OS X (or an open-source, GPL-licensed alternative libplist ). Then take the following 2 steps.
« Read More »

GCC and Clang: Library Incompatibility Issues in MacPorts

-
Jumble monolog (or quickly to What to do? ) Currently, I'm using Boost libraries and C++11 features in my Xcode project. But there is a problem. Boost libraries in my development environment was installed using MacPorts, and it seems these Boost libraries could not come along with C++11 features and LLDB in Xcode. Let's make things clear, it is a GCC-Clang compatibility issue. In Xcode build setting, you can choose GNU's libstdc++ for favor to Boost libraries (I'm not sure, but it seems they're built using GCC in my MacPorts environment), but then C++11 features and LLDB are crippled. Seemingly, libstdc++ provided by Apple LLVM is not C++11-ready. Vice versa, you can choose LLVM's libc++ for favor to C++11 features and LLDB, but then Boost libraries are crippled. I think the problem, on the surface, can be distilled to symbol name resolution failure.
« Read More »

Xcode: Easy Shared & Static Lib Management and Linking

-
Image
In Xcode, you can add existing frameworks (binary shared/static libraries or Apple's packaged framework) to a target in your project by choosing from the framework list or drag'n'drop from Finder. Several libraries under "Frameworks" group (e.g. libBusted.a) Benefit of doing this is obvious: you can manage and see what libraries your program is linked to. However, after doing that, I noticed one thing. Xcode does not link shared/static libraries in a simple way like: gcc -o qux libfoo.dylib libbar.a buz.o Instead, when libraries are going to be added, Xcode obtains paths to the directories containing these libraries, and appends these to the build setting "Library Search Path" of the target. So that the actual linking looks like: gcc -L/path/to/foobar -o qux -lfoo libbar.a buz.o Compared to the former, even though orthodox, linking in the latter is indirect. I like the former method because it's simple and error-free even though it somewh...
« Read More »