Base64 Encoded Images Embedded in HTML

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!):

British Blog Directory

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?

Sociable:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • Furl
  • NewsVine
  • Reddit
  • YahooMyWeb

13 Responses to “Base64 Encoded Images Embedded in HTML

  • Albert Källhag
    August 31st, 2005 12:04
    1

    Hi
    Your example works great, but when I try do do it with another picture encoded in base64 I doesn’t get it to work. example:

    any clues would be helpful
    thanks

  • marky moo
    August 31st, 2005 13:03
    2

    I have a feeling there is a size limit for URLs, but can’t remember what it is off hand. Have you tried it with a small image, just to check you can get the script working?

    What browser are you using?

  • CK
    September 17th, 2005 08:25
    3

    The stuff is really useful. I translate into Chinese and introduce it in my blog with some of my comments. Thanks for the great work.

  • Luiz Angelo Daros de Luca
    November 3rd, 2005 06:01
    4

    Hello,

    I did a workarround to it in IE using php. I translate HTML+base64 in a Mime Digest. Take a look at

    http://www.lsc.ufsc.br/~luizd/base64-to-mhtml/workaround.html

  • Jayram Krishnaswamy
    December 9th, 2005 01:16
    5

    The image shows up as an udnerscore in IE, but in FireFox you see a nice image.

    My question is this:

    The responseBody returned by a request to a Web Server needs to be retrived to show the image that it represents. What is the best way?
    Is there a Javascript function that does it?

  • Phi Tran
    January 23rd, 2006 04:46
    6

    We have found a workround for IE. When we translate the image into XBM files.

    Each XBM file I use mask and other color filter such as alpha gradient to create exortic bitmaps images use XBM file only.

    Thanks. There is a lot of example in MS filter code.
    specially the maske and the gradient. Just copy the ‘ShowMe” code then replace it div element by your own IMG element with your own img element to experience what XBM can do.

    WE HAVE DONE, TESTED AND IT WORKS.

    Thanks.

    Phi

  • Steve Break
    February 9th, 2006 14:08
    7

    I was doing this back in the year 2000&1, for specialized purposes. I never came across the XBM. I still use this, actually.

    IE and MS are annoying to work with in general.

    Phi Tran, do you just convert the image from JPG to XBM and then it works in base64?

    You seemed to say requires multiple XBM or some ‘Gradient’ so that it can work???

    I realize in other places you said that you don’t want to say too much about your hard work, but give me a general idea please. Is it as simple as converting to XBM?

  • LXj
    June 18th, 2006 21:37
    8

    Looks like it works well in Opera 9

  • Hamali Studenti
    January 7th, 2008 12:14
    9

    I would say yes to that question. Seems that simply converting the JPG to XBM solves the problem for IE*.

  • vivek yadav
    January 22nd, 2008 05:15
    10

    can someone tell me how to insert a base64 encoded image in css? something like this?

    div style=”
    background-image:url(”data:image/jpg;base64,—base64data—”);

  • Wolfgang Ulmer
    October 24th, 2008 08:27
    11

    remove the quotes inside url() and it will work.

  • 3ed
    November 19th, 2008 12:43
    12

    jpg2b64() { echo -n ’src=”data:image/jpg;base64,’; cat $1|base64 –wrap=0; echo “\”" ; }

    Usage:
    html_header; echo -n ‘%img ‘; jpg2b64 file.jpg; echo ‘bla=”blabla”%’; echo ‘%/hrml%’ % plik.html

    % - you know

  • John
    June 5th, 2011 16:48
    13

    can’t you use mhtml? that would overcome most problems with size, but which browsers support it? i know IE6+ does

Leave a Reply