IE6: How to get inline base64 images to work with IE6?

html internet-explorer image conditional base64

21,580

Solution 1

My solution run smoothly on IE6. It may help you!

<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body> 

<div id="pic" ></div>
<div id=test style="display: none;">

--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8  /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--

</div>
</body>
</html>

Solution 2

Install Google's Chrome Frame?

Seriously, you can't. IE6 does not have support for base64 inline images.

Solution 3

IE6 needs an expression to correctly interpret base 64 encoded images. Dean Edwards describes the solution here: http://dean.edwards.name/weblog/2005/06/base64-sexy/

Note: this is a very ugly hack. In the first place we were putting image code in our CSS; with this solution you need to either put presentational data in Javascript, or behavioural data in your CSS. Nasty but necessary.

Solution 4

base64 images are showing up in IE6 and IE7... in the last i found a simple solution when you are using a encoded images in css.

"write two attributes in a same class. Use css browser specific hacks"

I am going to explain it below.

   <div class="myClass">    </div>
    <style>
            .myClass{
                    background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D'); 
    /* Above property will work for all browsers*/

                    *background=url('give real path_to_image'); 
/* This will work only for ie6 and ie7 */
                    }
        </style>

Solution 5

You can use base64 in CSS, at least. Please take a look: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Perhaps more research could possible help using mhtml:// for inline images, too.

View more solutions

21,580

Author by

Jacob

Updated on April 16, 2020

Comments

Jacob about 4 years
How do I get IE6 to display inline base64 encoded images?
```
<img src="data:image/png;base64,....." />
```
This works in Firefox/Chrome/Safari but not IE6.
Jacob over 14 years

Can I do conditional statement so that IE6 links to the actual file but for all else, it displays the base64?
Cullen Walsh over 14 years

You would have to dynamically set the src using javascript, which IMO is more hassle than it's worth. Loading images from the server isn't a bad thing; it means users can cache them for multiple page loads. Why are you trying to make them inline?
mimetnet over 14 years

The sad part about Chrome Frame is that corporations aren't going to start picking it - and they're the ones still using IE6. As such, it's relatively silly and sad all at the same time. It's an interesting idea, but wasted on the developers and not the end-users.
Dirk Vollmar over 14 years

Conditional comments should do the job, but why include the base64 image then? It will be larger than the original image and browsers can load a separate image file faster. If you want a single file you might want to look at the MHTML (.mht) file format which works with IE 5 and above. Support in other browsers is poor though. See en.wikipedia.org/wiki/MHTML.
Elias Zamaria over 14 years

If IE6 does not support in-line data, would it matter what the format is?
pavium over 14 years

Maybe mimetnet is thinking that the problem is lack of PNG support, in which case GIF or JPG might work.
Dirk Vollmar over 14 years

IE6 supports PNG (but no alpha transparency, although there seem to be workarounds, see support.microsoft.com/kb/294714)
Arjan over 14 years

IE has supported PNG since some 4.x version. (Transparent PNG has been troublesome though.)
Jacob over 14 years

Inline images reduce HTTP GET requests. This is great for lots of small pictures.
Jacob over 14 years

IE6 DOES in fact support PNG. It just doesn't support 32bit alpha channel.
Arjan over 14 years

For lots of small images I'd use sprites instead.
Dirk Vollmar over 14 years

If you really have many pictures you could combine them in a larger image and use CSS clip to only display the part you want: <div style="position:absolute; top:100px; left:100px; clip:rect(0px, 130px, 130px, 0px);"> <img src="image.png" width="208" height="181" alt="bla" /></div>
Sander Versluys over 14 years

I also like to play with inline pngs but in the end sprites are the way to go!
Chris Moschini about 12 years

Can you explain what's going on here? It looks interesting, but for example... !locoloco?
Chris Moschini about 12 years

See below answers, especially Dean Edwards's "sexy" solution - it's small and does the job - tested and verified in IE6 and IE7.
Barney over 11 years

@Chris This makes use of multi-part HTML (see my answer below) — a scarcely-implemented technique for describing multiple resources in a single HTML file. Since the file will have a single URI, the various parts are given 'Content-Location' headers which can be referenced with a preceding ! then appended to the location (just as # specifies a given DOM node location within an HTML document).
Barney over 11 years

-1 because working solutions have been posted, and the proposed workaround isn't a solution to the specific technical problem described.
Makarand Mane about 11 years

I think this is a simple way to overcome problem of IE6 and IE7. I welcome, If anyone have any other better solution than this.