Embedding Images in HTML

I noticed that the my new Blogger theme had loads of links to external images, which forced the user to wait for a considerable time before he/she can see the full page. And sometimes, a few of the images would not show up at all (again, those little idiosyncrasies of the browsers). I was looking for a way to embed the images in an encoded format, directly into the HTML of the theme. After googling on it, I found a nice site which will create a Base64 encoding of any image I provide, which I can then add to my theme.

The general way to add an encoded byte stream instead of the URL in CSS:

div.image {
width:884px;
height:181px;
background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD...);
}

It took me considerable time to actually replace some 20 odd pngs and jpegs with weird series of characters (not to mention, it makes the theme code even more unreadable, but I managed to add comments wherever possible). I was happy with the result, as the updated theme loaded just fine in Safari 4 beta and Firefox 3 in Mac, Firefox 3.1 beta in Windows, Mobile Browser in S60 3rd Editon (Nokia E51), and Opera Mini browser. But, IE 6 couldn't process the encoded characters and display a picture. Haven't tried it IE7, so I would be really gratefully if someone is able to post a comment on how this blog looks using IE7 (or any other browser I haven't tried). If there are problems with many browsers, I might shift back to my previous url-linked-images version of the theme.

Update: Searching on the net provided some solutions to make IE display Base 64 encoded images, which requires a bit of PHP coding. Now I need to learn that, so I'll try to get this thing fixed as soon I have some time. My verdict? Why doesn't Microsoft's browser support something which is unanimously supported by all other browsers across all platforms? I would have completely ignored IE, but most of people still use IE, whether they like it or not :(