Wednesday, April 22nd, 2009

Using Base64 encoded images on IE too

Category: Browsers, PHP

<>p>Being able to use data: 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:

  1. header('Content-type:message/rfc822');
  2.  
  3. MIME-Version: 1.0
  4. Content-Type: multipart/related; boundary="NEXT_MHTML_DATA_PART"
  5.  
  6. --NEXT_MHTML_DATA_PART
  7. Content-Location:
  8. Content-Transfer-Encoding: quoted-printable
  9. Content-Type: text/html; charset="utf-8"
  10.  
  11. <!-- put the HTML in here including a for loop displaying: -->
  12. <div class="img" style="background-image:url(MHTML_IMG<?php echo $index?>)"></div>
  13.  
  14. --NEXT_MHTML_DATA_PART
  15. Content-Location: MHTML_IMG< ?php echo $index?> <!-- for each index -->
  16. Content-Transfer-Encoding: base64
  17. Content-Type: image/png
  18.  
  19. <!-- the image data here -->
  20.  
  21. --NEXT_MHTML_DATA_PART
  22. Content-Location: END_OF_MHTML_FILE
  23. Content-Transfer-Encoding: base64
  24. Content-Type: image/png
  25. IE_NEED_THIS_TO_END_DATA

Very nice, via (@simonw) :)

Related Content:

Posted by Dion Almaer at 5:19 am
7 Comments

+++--
3.9 rating from 20 votes

7 Comments »

Comments feed TrackBack URI

Sweet

Comment by V1 — April 22, 2009

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/

Comment by rasmusfl0e — April 22, 2009

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?

Comment by Marin — April 22, 2009

unfortunately, base64 images does not work for local files on IE

Comment by felipesabino — April 22, 2009

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/

Comment by jkirilenku — April 23, 2009

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 ;)

Comment by fabienmenager — May 21, 2009

“base64 images does not work for local files on IE”
I think so…

Comment by kaberdey — February 2, 2010

Leave a comment

You must be logged in to post a comment.