Wednesday, April 22nd, 2009
Using Base64 encoded images on IE too
<p>Being able to usedata: URIs to do interesting things such as inline images is incredibly useful.
IE 8 added support for data URIs but what about older versions of IE (which are still far too prevalent)?
This nice PHP script shows how you can send back data URIs for those who support it, and for older IE, use the message/rfc822 mime type that email clients often use to encode images:
PHP:
-
-
-
MIME-Version: 1.0
-
Content-Type: multipart/related; boundary="NEXT_MHTML_DATA_PART"
-
-
--NEXT_MHTML_DATA_PART
-
Content-Location:
-
Content-Transfer-Encoding: quoted-printable
-
Content-Type: text/html; charset="utf-8"
-
-
<!-- put the HTML in here including a for loop displaying: -->
-
<div class="img" style="background-image:url(MHTML_IMG<?php echo $index?>)"></div>
-
-
--NEXT_MHTML_DATA_PART
-
Content-Transfer-Encoding: base64
-
Content-Type: image/png
-
-
<!-- the image data here -->
-
-
--NEXT_MHTML_DATA_PART
-
Content-Location: END_OF_MHTML_FILE
-
Content-Transfer-Encoding: base64
-
Content-Type: image/png
-
IE_NEED_THIS_TO_END_DATA
-
Very nice, via (@simonw) :)
Related Content:
3.9 rating from 19 votes
Sweet
You can use the same technique in a stylesheet (same content for all browsers – no browsersniffing): http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
I’d rather use rasmusfl0e’s solution since it does not rely on browser sniffing. On top of it I’d just have a separate css with conditional comments targeting ie<8 so that browsers supporting base64 images won’t be punished.
Are there any constraints with the mhtml: for instance same domain policy etc?
unfortunately, base64 images does not work for local files on IE
Well there is a solution with that mhtml. In http://phpied.com is described very well. What I’m working about is a site with too many images. The inline representation of them is not well understood. I think most web developers just put their images with http request in the src attribute. Actually what I see is the misunderstanding of the case. I found that artice describing very well when and why you should use base64: http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/
I worked recently on another way of fixing this lack in IE 6+ : it looks for img, anchors, and any tag that has links to external resources, it works also for stylesheets and inline background image urls and changes it to an url to the server side script with the data passed via GET. You should try it out to see how it works :
http://phenxdesign.net/projects/phenx-web/iedatauri/example.php
The source is here : http://code.google.com/p/phenx-web/source/browse/trunk/iedatauri
You only need to include a JS and have the PHP script on your server.
The only limitation for now if the data URI size: not more than 2048 bytes, but I already have ideas to make it work with more data.
Any suggestion welcome ;)
“base64 images does not work for local files on IE”
I think so…