Многим известен данный способ отображения картинок, но особой популярностью он не пользуется, т.к. имеет проблемы с отображением в Internet Explorer (IE 6,7 — вообще не понимают, что им дают. А IE8 — принимает только картинки меньше 32кб).

Как же решить эту проблему?

Согласно RFC 2397, картинка (как и любые другие данные) должна быть представлена в следующем формате:
data:[<mediatype>][;base64],<data>

Изучим синтаксис более подробно:

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value

Что же здесь такого интересного? Дело в том, что mediatype может содержать в себе дополнительные параметры (например, charset).
Соответственно, никто не запрещает нам хранить в нем свои данные.

К чему я все это?

Internet Explorer не может прочитать закодированные в base64 изображения, но спокойно может загрузить их, если мы укажем их url.
Так что, если указать url прямо в mediatype?

Сделать это можно примерно следующим образом:
data:image/png;src=habr.png;далее_base64_кодировка...

Это все, конечно, очень хорошо и интересно, но как же IE поймет, что дополнительный параметр и есть наша картинка?

Я предлагаю использовать behavior.
Это css-атрибут, поддерживаемый только в Internet Explorer и многим известный по такому проекту как PNGFix (одной из его реализаций).

Выглядеть это будет примерно так (код CSS):
#A {
background-image: url(data:image/png;src=habr.png;далее_base64_кодировка...);
behavior: url(ieb64.htc);
}


А это код ieb64.htc:

<public:attach event="ondocumentready" onevent="ondocumentready()" />
<script type="text/javascript">
function ondocumentready() {
  this.style.backgroundImage =
    this.currentStyle
      .backgroundImage
        .replace(
          /^url\s*\(\s*\"?\s*data:[^;]+;src=([^;]+);.*$/,
          function(all, url) {
            return "url(\"" + url + "\")";
          }
        );
}
</script>

Посмотреть демонстрацию можно здесь.
А тут можно скачать htc-файл.

Спасибо за чтение!