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.
views:
1970answers:
4
+4
A:
Install Google's Chrome Frame?
Seriously, you can't. IE6 does not have support for base64 inline images.
phantombrain
2009-10-15 21:59:57
Can I do conditional statement so that IE6 links to the actual file but for all else, it displays the base64?
Jacob
2009-10-15 22:06:07
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?
phantombrain
2009-10-15 22:09:10
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.
mimetnet
2009-10-15 22:11:25
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 http://en.wikipedia.org/wiki/MHTML.
0xA3
2009-10-15 22:13:30
Inline images reduce HTTP GET requests. This is great for lots of small pictures.
Jacob
2009-10-15 22:32:41
For lots of small images I'd use sprites instead.
Arjan
2009-10-15 22:37:13
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>
0xA3
2009-10-15 22:39:50
I also like to play with inline pngs but in the end sprites are the way to go!
Sander Versluys
2009-10-15 22:51:29
A:
If this isn't for a corporate setting, I'd say just drop IE6 support all together, and have people install Chrome Frame if they insist on using such an outdated browser.
nasufara
2009-10-15 22:02:18
Can I do conditional statement so that IE6 links to the actual file but for all else, it displays the base64?
Jacob
2009-10-15 22:06:55
How would PHP help? This would have to be performed on the client side. No,just HTML
Jacob
2009-10-15 22:08:41
If you were to use PHP, or any other web language, you could check the user's agent string and make a decision based on that.
nasufara
2009-10-15 22:12:00
@darkassassin93: Jacob is referring to conditional HTML comments, an IE-specific feature to support browser-specific behavior within HTML. See http://en.wikipedia.org/wiki/Conditional_comment
0xA3
2009-10-15 22:15:35
A:
ORGINAL
I do not believe IE6 supports in-line data for the <img/> tag. However, you might want to try another format like GIF or JPG.
EDIT
Given the fact that it took IE forever to accurately support PNG (still debatable) one could easily deduce that PNG might not be supported as an in-line data format for <img/> tags. With that said, goto **ORIGINAL**
mimetnet
2009-10-15 22:09:30
If IE6 does not support in-line data, would it matter what the format is?
mikez302
2009-10-15 22:18:20
Maybe mimetnet is thinking that the problem is lack of *PNG* support, in which case GIF or JPG might work.
pavium
2009-10-15 22:26:35
IE6 supports PNG (but no alpha transparency, although there seem to be workarounds, see http://support.microsoft.com/kb/294714)
0xA3
2009-10-15 22:31:17
IE has supported PNG since some 4.x version. (Transparent PNG has been troublesome though.)
Arjan
2009-10-15 22:31:23
IE6 DOES in fact support PNG. It just doesn't support 32bit alpha channel.
Jacob
2009-10-15 22:33:26
A:
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.
gryzzly
2010-05-25 18:03:29