I’ve been playing around with embedding images directly in HTML documents. The main driver for this is the huge load and bandwidth suck that BritBlog experiences as a result of most our members linking directly to our little icons. (Don’t get me wrong; it’s great that so many of our members help to promote us, I just wish a few more folk could host their own icons!)
You may have noticed that that Internet Explorer can save web pages (images and all) as one file. This seems to be MIME-encoded (like HTML email) with boundaries, which is fine for standalone documents, but no good for me if I want to embed an image directly in an ordinary HTML file.
So after hunting around a bit I came across an alternative technique, that still uses base64 encoding. It’s a great approach, but unfortunately it only seems to work in Firefox. This is great for me, but alas a large proportion of internet users still use IE so I can’t really use it for my stated application.
Anyhow, it’s an interesting technique, so I thought I’d share it here. This is what I was planning on doing:
$file = "icon.gif";
if($fp = fopen($file,"rb", 0))
$picture = fread($fp,filesize($file));
// base64 encode the binary data, then break it
// into chunks according to RFC 2045 semantics
$base64 = chunk_split(base64_encode($picture));
$tag = '<a href="http://www.britblog.com/"><img ' . "n" .
'src="data:image/gif;base64,' . $base64 .
'" alt="British Blog Directory" width="80" height="15" />';
This is roughly what it produces:
" alt="British Blog Directory" width="80" height="15" /></a>
And if you paste this into your HTML document, this is roughly what you get (I had some problems getting this code through WordPress, so this may be another reason not to use it!):
Depending on your web browser, you will either see a broken image, or a nice little BritBlog icon!
So I wonder when the next IE will be out, and if this will fix the problem?