Embedding Images in HTML

Posted June 25, 2008
Leave a Comment

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?


Was this information useful?


7 Responses to "Embedding Images in HTML"
  1. Jade Robbins on June 25th, 2008

    I think that Internet explored has been holding the internet back and ultimately making developers work twice as hard to do anything. I’ve spent countless hours fixing things that worked on e dry major browser except it. I hate it with a fiery passion.

  2. Matthias on June 27th, 2008

    Ah yes I just thought of the Base64-method some weeks ago but when I found out that IE dislikes this method I also was displeased.
    This way of including images in HTML is the ultimate method I think. Especially for 1px-graphics like background-gradients you could save some spare queries.
    So I end up with the idea of just using one single CSS-sprite that contains all your web-images including the menu-states. It’s a misery that nice features like this are being blocked by Internet Explorer.

  3. Mark Sanborn on June 27th, 2008

    Matthias,

    Well IE is always holding us back. Fortunately the base64-method will be supported in the newest version of IE. I think we might see this method being use a bit more in the future. Embedding all your images in one file seems like a good solution but very time consuming :( . Damn IE.

  4. Jade Robbins on June 27th, 2008

    is there a php function that could do this for you? I would like to see some load times/efficiency tests on loading the image through another server request versus php loading it and converting it to base64.

    I mean I understand it is much more efficient for static images, but i wonder where you have dynamic image content which method has what benefits.

  5. Mark Sanborn on June 27th, 2008

    There is a PHP function:

    http://us2.php.net/base64_encode

    Not sure if it would be worth it to encode on the fly though.

  6. Ultimate Guide to SEO: Keywords on July 4th, 2008

    [...] here to read about embedded html [...]

  7. Compress Images For Faster Load Times on July 25th, 2008

    [...] talked about images that could be embeded into the HTML for faster load times. Today we are going to talk about how to compress those images even smaller [...]