Data Support: Internet Explorer URL

Many people know this way of displaying pictures, but it does not enjoy particular popularity, because It has problems displaying in Internet Explorer (IE 6.7 - they don’t understand what they are given at all. And IE8 only accepts images smaller than 32kb).

How to solve this problem?

According to RFC 2397 , the picture (like any other data) should be in the following format:
data:[<mediatype>][;base64],<data>

Let's study the syntax in more detail:

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

What is so interesting here? The fact is that mediatype may contain additional parameters (for example, charset).
Accordingly, no one forbids us to store our data in it.

Why am I doing all this?

Internet Explorer cannot read the base64-encoded images, but can easily download them if we specify their url .
So, if you specify the url directly in mediatype ?
')
This can be done approximately as follows:
data:image/png;src=habr.png;_base64_...

This is all, of course, very good and interesting, but how does IE understand that the additional parameter is our picture?

I suggest using behavior .
This is a css attribute that is supported only in Internet Explorer and is widely known from a project like PNGFix (one of its implementations).

It will look something like this ( CSS code ):
#A {
background-image: url(data:image/png;src=habr.png;_base64_...);
behavior: url(ieb64.htc);
}


And this is the code 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 >

You can watch a demonstration here .
And here you can download the htc file .

Thank you for reading!