Thanks to a posting on Slashdot by one jonasj, I've just rediscovered a nifty little HTML feature known as the "Data" URL Scheme (RFC 2397).
What this Data URI does is allow you to embed encoded binary data inline within an HTML document. Think of it like an email with a base64 encoded mime attachment, embeded within the body of the textual email.
Now I hear some of you asking how could this be useful in the real world? Well here is a simple example. Think about the last time you hit the SAVE button while browsing the web. You ended up with how many files? 1 html, maybe 1 or 2 css, and dozens of jpg/gif/png files. Now with this one saved web page you have to manage 20+ files. Certainly a bit of a cluttered mess n'est pas?
With the data: URI scheme that same mess of files can be saved as one file with all of the external images and css files saved inside the document in a neat and tidy bundle.
Unfortunately no one had really supported this HTML feature until recently. These days Opera 7, and Firefox/Gecko fully support it, so we can finally play around with it.
Here is a simple example provided by jonasj in that Slashdot posting:
data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywA
AAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCY
sapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5
YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendz
WTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeG
l9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOz
rcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97V
riy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7
If you are in a cool browser, then you should see an image up there, loaded from that chunk of base64 encoded data. If you are not in a cool browser, well then I'm sorry : P
The syntax is as follows:
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
Read through the RFC for a full breakdown of how it works.
What this Data URI does is allow you to embed encoded binary data inline within an HTML document. Think of it like an email with a base64 encoded mime attachment, embeded within the body of the textual email.
Now I hear some of you asking how could this be useful in the real world? Well here is a simple example. Think about the last time you hit the SAVE button while browsing the web. You ended up with how many files? 1 html, maybe 1 or 2 css, and dozens of jpg/gif/png files. Now with this one saved web page you have to manage 20+ files. Certainly a bit of a cluttered mess n'est pas?
With the data: URI scheme that same mess of files can be saved as one file with all of the external images and css files saved inside the document in a neat and tidy bundle.
Unfortunately no one had really supported this HTML feature until recently. These days Opera 7, and Firefox/Gecko fully support it, so we can finally play around with it.
Here is a simple example provided by jonasj in that Slashdot posting:
data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywA
AAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCY
sapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5
YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendz
WTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeG
l9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOz
rcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97V
riy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7
If you are in a cool browser, then you should see an image up there, loaded from that chunk of base64 encoded data. If you are not in a cool browser, well then I'm sorry : P
The syntax is as follows:
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
Read through the RFC for a full breakdown of how it works.