aled's cyfle

Wednesday 31 January 2007

Inline images within your HTML page

Posted at 8:11 pm.

I've been working on a Mac ever since starting at Dimension 10, and recently bought a MacBook (woohoo!). I've also been using Bloglines for years as my feed reader.

A few months back I installed Jon Hicks's Bloglines skin, which provides a much nicer interface to the usual bloglines design for Firefox, Camino, Safari, Omniweb and Opera browsers. The skin is built for Mac, though it apparently should work on other platforms too.

Last week I installed the skin on my MacBook (woohoo!), and before installing it I took a sneak-peek at the CSS. What I saw surprised me - the images used in the CSS for various elements had the data encoded into the file. This made the page redundant from any outside sources, and made installing a lot easier with only 1 file.

Since then it's been puzzling me how to do it. I know why people do it, in this case at least... You don't have to download extra images. This means that self-contained web apps such as Loggr and GTD TiddlyWiki - apps in web-browsers that you can download to your computer - could contain images without having to link to them anywhere.

I searched and searched, and finally came across a few good resources. Images in these instances were encoded in base64-encoded binary, which is text that's readable by machines. Ever viewed the source of an e-mail seen a lot of unreadable characters? It's likely to be an attachment, and if its an image, the likelihood is that it's base64-encoded binary.

There's a really good explanation at Wikipedia on the subject, and an online image converter at Greywyvern.

I gathered a couple of important notes on the subject from Wikipedia that I think I should outline here:

  1. Internet Explorer (as is predictable) deals with this kind of data unpredictably. It's the later versions (6 & 7) that have no support for it.
  2. The browser will limit the amount of data processed, which could result in a broken image if the data is more than the limit. Opera has a file-size limit of 4kb.
  3. It's downloaded every time a page is loaded/reloaded, meaning it cannot be cached
  4. It results in a larger file size

However, in my opinion, you shouldn't use Internet Explorer or have large images in your site anyway. With broadband speeds, downloading the data over and over again won't be a problem for the user, but might be a problem for your bandwidth; and though it would make the file size a little larger, you'd be downloading the image itself anyway, with the same data in that image.

I've always fancied a go at coding a self-contained web-app. Knowing this gives me inspiration and ideas. Hmmm, we'll see.

1 comments

Anonymous Anonymous (4:27 pm):
Hellooo!!
Good blogging by the way!

:-) Rianne x

Add a Comment