Using Base64 encoded images on IE too

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

If you have better solution, just tell me!

0 comments: