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:
<?php
$file = "icon.gif";
if($fp = fopen($file,"rb", 0))
{
$picture = fread($fp,filesize($file));
fclose($fp);
// 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" />';
echo $tag;
}
?>
This is roughly what it produces:
<a href="http://www.britblog.com/"><img
src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=
" 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?
RSS Feed for posts