Embedding Images in HTML

Written by Mark Sanborn: Jun 25, 2008

After doing some research on embedding CSS in HTML I found an interesting link. It turns out that you can embed image data into your HTML URLs. This means that image will be downloaded along with the HTML reducing the total amount of server requests. If you could do this to all of your images you could effectively have a SINGLE request to download the entire webpage contents.

So what’s the catch? The catch is that this technique is not supported in every browser. It appears that IE7 doesn’t like it too much. In my tests IE7 thought the page was a phishing attempt and didn’t display the image. Firefox and Opera worked just fine.

The technique of combining data with HTML as one request has been around since 1995. So why have we not seen this implemented on a large scale? Why hasn’t Internet Explorer added this? After doing some more searching it looks like IE8 beta 1 will implement it.

If you have a supporting browser like Opera or Firefox, you should see a picture of tux below.

If you right click on it or view the source you will see that it is not linked to any url the entire picture is embedded within the HTML.

Do you think this technology will catch on?

Need to print shipping labels on your site?

Checkout my product RocketShipIt for simple easy-to-use developer tools for UPS™ FedEx™ USPS™ and more.

Share: