Sometimes you like to think that you pretty much know everything there is to know about URIs and web browsers. I learned something today that I had absolutely no idea about before. The magic data URL protocol.
It's defined in RFC2397 as a way to include immediate data in a URL.
For example the following defines an inline GIF image in a base64 encoding:
<IMG SRC="data:image/gif;base64, iVBORw0KGgoAAAANSUhEUgAAADsAAAAvAQMAAABnrCB9AAAABlBMVEUAAAD///+l2Z/dAAAAvElE QVQY03XQwQ0CIRAF0E9I5GLEClwrkVasxKU07GRK2CMHAn4GdXdNJCS8hDDzB7SxBFvI3PFsLYWW r5CpRe47FtfgKwTZVvhiBMVUuGwJPODECSpucMmzDi5w6IgOJ0xEsjgiEGLiGTOxgKs3zTxNRyFs RyWc5iG8IgKTIgFBIcCsYKERPrPMHoX1FIz6D2WF/Xm+rHi3+DZNG4R9Qhw+OI3w/LAxTsEU7UAY yAhJZ1/0TxR9dxjeNnkBOFrkvJphu9wAAAAASUVORK5CYII=" ALT="Atlassian Dude">
Which, if your browser supports it, will render thusly:
I only discovered this because Yahoo's excellent YSlow extension for Firebug suggested replacing small, externally referenced images with data protocol representations.
Pretty neat.
Tags: URL data image
4 Comment(s)
Yes, the data uri is used by many userscripts (http://userscripts.org) for Firefox. It is interesting however that YSlow recommends that since it does not work on all the browsers.
By Kishore Senji at August 12, 2007 10:02 PM
There's a related entry in Rife's blog [1] quite sometime ago.
If not mistaken, its been the convention used by those porn site to spam people with porns and make sure they get it even if they are eventually offline. ;) No I don't subscribe to porns.
[1] - http://rifers.org/blogs/gbevin/2005/4/11/embedding_images_inside_html
By tmjee at August 12, 2007 11:02 PM
Nice ... just when I thought I'd read the URI specs inside and out something else comes along :D
One drawback of this markup will be to reduce the cacheability of image data though, since in the default theme every page is marked as no-cache. We recently added control over these meta tags to the Builder theme and pages that used to take 3 or 4 seconds to load now take 1 or 2!
By Alain Moran at August 13, 2007 9:40 AM
You can also do this sort of stuff in CSS files, the benefit being that the CSS file can then be cached. We looked in to this stuff when developing Theme Builder 3.0 but decided the benefits weren't worth it and that better caching of resources by the browser + merging of js and css files where possible yielded better results.
Unfortunately there are issues with PNG images in IE 5.5 > 6.x and you generally need to have those as external files for various reasons.
Another thing that's well worth checking out is sprite images - ie. instead of having loads of little image files, create one bigger image with all the smaller images arranged in to a grid. You can then use CSS to display just the desired image from that file (in certain scenarios).
By Guy Fraser at August 13, 2007 10:14 AM