Emulating Data:URIs in IE6 and IE7

July 6, 2009 at 8:57 am | In css design, gecko, khtml, presto, trident, webkit | Leave a Comment
Tags: base64 image, data uri, mht, mhtml, multipart, yslow

Example

CSS

#abcxyz_logo {
background-image: url(mhtml:http://www.abcxyz.com/css/uris.mht!abcxyz_logo);
}

MHT(uris.mht)

Content-Type: Multipart/related; boundary="_URI_DELIMITER"; type="text/html"

--_URI_DELIMITER
Content-Location:abcxyz_logo
Content-Type:/image/gif
Content-Transfer-Encoding:base64

mylogoissocoolyourlogoisforfoolsschooltoolrulegruelpoolsocruel...
--_URI_DELIMITER--

Here’s a series of articles on using MHTML and server-side scripting to create cross-browser Base64 encoded image data:

Use MHTML:URIs when you need Data:URIs in IE7 and under

Key Concepts of MHTML

When you should use Base64 for images

Data URIs in CSS Cross-browser

Data URIs using the Object Element

Embedding Base64 Image Data into a Webpage

Aptimize for Realtime Spriting and converting bitmaps to MHTML/Data URIs

Base64 Encoded Images for Internet Explorer

Building MHTML Files from URLs

Data URI Examples for IE6/7

MHTML Test Messages