MHTML – when you need data: URIs in IE7 and under

April 10th, 2009. Tagged: CSS, IE, images, performance

UPDATE: It's very important to have a closing separator in the MHTML document, otherwise there are known issues in IE7 on Vista or Windows 7. The details are here.

In the previous post I described what data: URIs are and how they are useful to reduce the number of HTTP requests. Now, the problem with data: URIs is that they are not supported by IE < 8. But, thanks to this article (in Russian), here's a way to work around that limitation: using MHTML for IE7 and under.

MHTML-a-what?

MHTML is MIME HTML, or if you insist on me spelling it out completely is like "Multipurpose Internet Mail Extensions HyperText Markup Language". In short it's HTML but like email with attachments. In one "multipart" email you can have several... hm, things - HTML version of the email, text-only version, attachment, another attachment...

MHTML is the same but for HTML. In one file you put a bunch of stuff (e.g. image files) and you save on the precious HTTP requests.

MHTML example

Let's check out an example. The HTML is actually not important, it's the CSS where we'll stick all our inline images. Once with data: sheme for all normal browsers and once with the mhtml: scheme for IE before 8.

The overall "template" would look like so:

/*
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
 
--_ANY_SEPARATOR
Content-Location:somestring
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAA[...snip...]SuQmCC
--_ANY_SEPARATOR--
*/
 
#myid {
  /* normal browsers */
  background-image: url("data:image/png;base64,iVBORw0[...snip...]");
  /* IE < 8 targeted with the star hack */
  *background-image: url(mhtml:http://phpied.com/mhtml.css!somestring); 
}

The multipart stuff goes into a CSS comment. You then use data: URI scheme for all normal browsers. Then you use the star hack to target IE browsers before 8. For these browsers you give the URL of the CSS, exclamation and then a string that uniquely identifies the desired "part" in the multipart comment. Simple, eh? Didn't think so, but hey, it's not exactly rocket science.

Demo example with more parts

Check out a demo page that has two "parts" in the multipart MHTML comment.

The HTML is noting special and the CSS goes like:

/*
Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"
 
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:locoloco
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:polloloco
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUhEUgAAABkAAAAUBAMAAACKWYuOAAAAMFBMVEX///92dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYvD4PNAAAAD3RSTlMAACTkfhvbh3iEewTtxBIFliR3AAAAUklEQVQY02NgIBMwijgKCgrAef5fkHnz/y9E4kn+/4XEE6z/34jEE///A4knev7zAwQv7L8RQk40/7MiggeUQpjJff+zIpINykbIbhFSROIRDQAWUhW2oXLWAQAAAABJRU5ErkJggg==
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR--
*/
 
#test1 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC"); /* normal */
  *background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml.css!locoloco); /* IE < 8 */
}
 
 
#test2 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAUBAMAAACKWYuOAAAAMFBMVEX///92dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYvD4PNAAAAD3RSTlMAACTkfhvbh3iEewTtxBIFliR3AAAAUklEQVQY02NgIBMwijgKCgrAef5fkHnz/y9E4kn+/4XEE6z/34jEE///A4knev7zAwQv7L8RQk40/7MiggeUQpjJff+zIpINykbIbhFSROIRDQAWUhW2oXLWAQAAAABJRU5ErkJggg=="); /* normal */
  *background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml.css!polloloco); /* IE < 8 */
}
 
div {
  width: 100px;
  height: 100px;
  font: bold 24px Arial;
}

Drawback

In addition to the drawbacks of data: URIs (bigger CSS, small CSS change invalidates your cached inline images), this method has the obvious drawback that the inline images are repeated twice. But sometimes... a person's gotta do what a person's gotta do ;)

Tell your friends about this post: Facebook, Twitter, Google+

144 Responses

  1. [...] Continued here: MHTML – when you need data: URIs in IE7 and under [...]

  2. Interesting article! Unfortunately, this doesn’t work for me in both IE6 and IE7 (on Windows XP). The divs just have a blank background. There are no special security settings for the browsers (it’s a stock Windows XP install, with nothing more than IE). I don’t really know what further information I can supply that would be helpful for debugging.

  3. For some reason, I can’t save other webpages as .mht either. Maybe my installation is broken, but I actually don’t know what could have broken it.

  4. It worked in another VM in IE6. I don’t quite know why it’s broken in the other VM (as I said, it’s a straight-from-disc Windows XP installation with no further modifications).

  5. Thanks for the comment/report, Konstantin. I tested with an XP VM (on a Mac) and it worked for me, dunno what can be happening with your install, but please drop a comment if you figure it out.

    Thanks again,
    Stoyan

  6. [...] MHTML – when we need data: URIs in IE7 as well as under [...]

  7. Great post! Thanks for sharing.
    Did you test it on IE7 on Vista?
    I’ve found this http://www.eggheadcafe.com/software/aspnet/33808138/mhtml-doesnt-work-in-vis.aspx
    Thanks.

  8. Hey Hedger, nope, only XP virtual machine.

  9. Tested this technique out on Windows Vista with IE7 and the background images are not viewable.

  10. But now isn’t your CSS file is getting the image twice, once in the comments for IE<8 and then once again for everyone else?

  11. [...] MHTML – when you need data: URIs in IE7 and under / phpied.com [...]

  12. @anthony – yep, that’s a drawback. One solution would be to include browser-specific stylesheets.

  13. Though IE7 is the default browser on Vista, I’d assume that the MHTML issue would apply to all IEs on Vista.
    To make MHTML work on IE with Vista, all we need is to do two things.

    * Output the MHTML document with the content-type “text/plain”.
    There are a lot test examples on http://people.dsv.su.se/~jpalme/ietf/mhtml-test/mhtml.html
    You may try this one http://people.dsv.su.se/~jpalme/ietf/mhtml-test/mhtml-1.txt for example.

    * Redirect do that MHTML file to its hosted URI which “mhtml:” as prefix.
    eg: mhtml:http://people.dsv.su.se/~jpalme/ietf/mhtml-test/mhtml-1.txt

    This would work on IE7/Vista http://www.hedgerwow.com/360/dhtml/base64-image/demo.php?v=2009

    Thanks.

  14. There is a solution where you don’t have to put both images (IE + others) into one file.

    It’s not a must to put the image-data for the mhtml source into the same css file. It’s possible to reference to an other file, that can have any file extension, so it’s possible to put the mhtml data into an own txt file, wich is delivered as text/plain by the webserver, so it’s also working in IE7 Vista.

    Take a look at: http://www.betalon.com/html/release.htm

    I’ve tested this with: IE 6 (XP), IE 7 (XP), IE 7 (Vista), FF 3 (XP), Safari (XP)

    The CSS file is: http://www.betalon.com/static/release/css/screen.css
    The MHTML contents are in this file: http://www.betalon.com/static/release/css/screen.iecss!imagk

    So in the browsers which support data-urls the image contents will be loaded only once.

    Don’t be afraid to contact me if there is any problem with this solution.

  15. [...] MHTML – when we need data: URIs in IE7 as well as under [...]

  16. [...] Explorer: Data-URIs in IE7 and under – Der IE8 kann es von Haus aus und mit diesem Trick auf die älteren [...]

  17. [...] Stoyan wrote an interesting post today onMHTML – when you need data: URIs in bIE7/b and under / phpied.comHere’s a quick excerptUnfortunately, this doesn’t work for me in both IE6 and bIE7/b (on bWindows/b XP). The divs just have a blank background. There are no special security settings for the browsers (it’s a stock bWindows/b XP install, with nothing more than IE). … [...]

  18. Sorry, Stoyan – please delete the above. My mind was still switched to German mode…

    What I wanted to say: very nice tipp!

    I made use of this technique on one of my customers’ site, where the customer always complained that the loading times of the image gallery pages took so long. Which is no wonder, as they consist of up to 130 thumbs that induce a lot of HTTP-overhead. In addition he used to visit his page with IE7/8, which made it even worse (Google Chrome dealt quite OK with it for example).

    So now I do a serverside check for the user agent, and serve the right technology for the respective browsers: The IEs get all thumbs stuck together in an external MHTML-file (which is nice, as it makes it browser-cacheable), Webkit and Firefox get the thumbs embedded as Data URIs. All other browsers take the traditional route, with a little tweaking in that I load the images from 3 different subdomain (all pointing to the same folder) and therefore get around the HTTP-1.1-limitation of only 2 connects per host in parallel (now up to 6 in parallel).

    The MHTML and HTML-files are being GZIP-compressed which saves about 50% of the image-data load. THE MHTML-file also gets browser-cached through the help of mod_expires. And all the base64-transcoded data gets cached on the server-side in order to save CPU-cycles and time.

    Here is the page in question:
    http://www.sky-fun.de/fallschirmspringen-fotos-bilder.php

    Thank you very much again for your blog and regards from Germany!

    Schepp

  19. This article (and the accompany data: URI one) saved me! Thanks for your efforts.

    A tip for other readers: the format of the MHTML template is important. In my experience, the boundary declaration needs double-quotes (not single-quotes), and the blank lines after Content-Type and before data string must be present.

    Thanks!
    Stuart

  20. [...] Phpied.com – MHTML – when you need data: URIs in IE7 and under [...]

  21. Has anybody written a canvas API for this yet?

  22. [...] same trick is used to for CSS and to reduce HTTP requests. And by reading that post I learned that we have to do it another way in IE. In IE we have to use MHTML and it involves a little more work on the server but we can still end [...]

  23. Thanks for the great post here!
    I was trying to produce the same result by putting the CSS and mhtml stuff in the tag in the html file. However, it didn’t work. Have you ever tried this? Thanks!

  24. Which tag, Caren? Seems like the tag was stripped from your comment

  25. Thanks for the quick response, Stoyan!
    What I was trying to do is put the multipart and CSS stuff in the tag in the html file. I’m not entirely sure what to put in the url which points to the path to the multipart , i.e. mhtml:http://phpied.com/files/mhtml/mhtml.css!locoloco. Does the path now point to the html file path itself? I also did some google search and found out that maybe content-id is another way to serve as the location here, but I’m still out of luck to get it work.
    I appreciate your help !

  26. Is there to specify relative urls instead of absolute urls
    for example
    use something like below
    *background-image: url(mhtml:mhtml.css!locoloco);
    instead of this
    *background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml.css!locoloco);

    thanx

  27. [...] MHTML和Data URI还比较类似,有更强大的功能和更复杂的语法,并且没有Data URI中“无法被重复利用”的缺点,但MHTML使用起来不够灵活方便,比如对资源引用的URL在mht文件中可以是相对地址,否则必须是绝对地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析,如果不修改Content-type则需要使用MHTML协议,这个时候必须使用绝对路径,如《MHTML – when you need data: URIs in IE7 and under》。 [...]

  28. @schepp: What do you think of the technique called “CSS Sprites”? It creates one big images (which can be generated on server side) and send it to the client, instead of sending many small images. For more information: http://www.alistapart.com/articles/sprites

  29. I having a problem with *.mht/mhtml. First, I can save web-pages as *mht – no problem. The problem is that I cannot open ANY *.mht/mhtml saved web-page from Microsoft. I save the “fact sheets” (knowledge base articles) for respective MS updates so that, when or if needed I have them available rather than having to always go online to view/read. Some time ago, exactly when I don’t remember, I had no problem with this. However now, when I attempt to open a *.htm saved MS web-page, IE7 grinds to a halt and stops responding. I have to run Task Manager to “end process” for IE. The same holds true for IE8. Additional info … I can open any *.mht saved web-page from any other web-site (so far) without any problem. Also, I can save MS web-pages a *.htm (html) and can open them without any problem. It’s only the MS web-pages I’m having problems with when saved as *.mht. I am using Windows XP Home w/SP2 (fully up-to-date as far as I know) and currently using IE7. MS help is worthless for any kind of assistance. I have been googling various topics and not finding anything that is close to what I am experiencing. Can you help? Thanks for listening.

  30. very nice post

  31. Problem with IE7 on some XP machines.

    The sample page in this article (http://phpied.com/files/mhtml/mhtml.html) will not run with IE7 on some XP machines in my intranet, on other XP machines with IE7 it works fine. I have compared IE settings but there are no differences. There is no error message, the images will just do not show. Any thoughts on this?

  32. Hi Mats,

    Other comments also reported an issue with XP. Looks like the solution would be to serve the MHTML document with text/plain and inside have the different multi-parts: css and images.

    I don’t have a test page for you to try, but check some of the URLs in the comments above.

    Thanks and please drop a comment if you can/cannot make it work.

    S

  33. This thread brings to our attention that sometimes IE7 can not save an archive file (mht) which seem to be related to my problem above, since what we are trying to accomplish actually is to include a web archive (mhtml) in the CSS.

    http://groups.google.com/group/microsoft.public.internetexplorer.general/browse_thread/thread/43f0ebcf38372f5d/60b609a62697af29?hl=en&q=%22web+page+could+not+be+saved%22+group:microsoft.public.*#60b609a62697af29

    Could this be it? I really can not have customers re-install IE7…

  34. [...] they’re not supported in IE7 and earlier. Recent blogs from web dev performance rock stars Stoyan Stefanov and Hedger Wang discuss a workaround for early versions of IE using MHTML. Aptimize has already [...]

  35. [...] This post was Twitted by zigazou [...]

  36. @Sander van Veen You are right, this would have been the other option. In this case that image-gallery backend was already existing and I just revamped the frontend-part. Sprites would have worked OK here (if they would hit the server’s memory-limit while beeing built). But in CSS I definitely prefer dataURIsation over sprites as I now have a setup where I can code as usual and PHP transforms everything on the fly (MHTML for IE < 8, dataURIs for the rest). Sprites are more taxing on the server and take longer to autobuild and, depending on the combination of images, are not too effective in using their pixel-space.

  37. [...] fair amount written about data URIs recently: my colleague Stoyan Stefanov has written a couple of posts about data URIs, and my former colleague Hedger Wang also penned a post about how to use data URIs [...]

  38. [...] Stoyan, http://www.phpied.com/data-urls-what-are-they-and-how-to-use/, http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ R Reid, Detecting IE 8 Compatibility Modes with [...]

  39. Hi, thanks for the useful post! just wonder how it’s going to work if I embed the css within the html file? I have twisted the mhtml link in the css many ways but couldn’t get it work. Thanks again!

  40. Excellent technique, but executed with conditional comments instead of stuffing everything in the same CSS file, you avoid all of the drawbacks you mention without adding any (to my knowledge, at least) new ones.

  41. Awesome! But why not just use the MHTML method for all browsers, instead of implementing both?

  42. nevermind… mhtml is not supported…

  43. [...] in Internet Explorer 6 & 7, where data: URIs aren’t supported. (See the blog post from Stoyan Stefanov and examples from Hedger Wang for more info on this MHTML [...]

  44. [...] only came across the MHTML image hack over the weekend, while listening to @jeresig on the new jQuery podcast (incidentally not the only [...]

  45. You can use online generator of data:uri css sprites

    http://duris.ru/lang/en/

    Supports MHTML for IE<8 & data:URI for other browsers

  46. Has anybody successfully used this technique on a site protected with SSL? We are encountering a problem where IE7/8 is detecting the page contains “mixed content” and pops up that nasty Security Warning dialog even though all of the requests are over HTTPS (confirmed with wireshark).

  47. *bump* this last question re MHTML files being server via HTPPS but failing.

  48. My tests with IE6 doesn’t work with PNG24 images.

    Does anyone has tested PNG24 images with transparence?

  49. Just to let you know: it seems impossible to “Inject” mhtml in IE via javascript in a HTML page or CSS styleSheet.
    See a failing exemple: http://adrien.gibrat.free.fr/mhtml.html

    Adding mhtml in comments in the DOM won’t work in any version of IE…
    some will say that was obvious, but I was very hopefull, and now I hate IE even more ;)

  50. References:
    http://www.microsoft.com/technet/security/Bulletin/MS07-034.mspx
    http://msdn.microsoft.com/en-us/library/ms775147
    http://support.microsoft.com/kb/825803/
    http://support.microsoft.com/kb/330994/

    Why must full URLs be used in CSS url(…)?
    Internet Explorer processes the mhtml: prefix(protocol) internally before and after sending a GET for the content. What is sent to the server is a normal HTTP GET request for the base resource file, exluding the !(BAM) and the multipart-indicator suffix. For example, if you request mhtml:http://my.example.com/ie-fix.mht!image.png in any version of IE, the browser interprets the mhtml: protocol as a request for multipart/related content and strips the ‘!image.png’ part-reference before sending a GET for http://my.example.com/ie-fix.mht (or before reading the file from cache). Upon recieving a response, IE resumes processing of the mhtml: protocol and uses the previously stripped reference suffix to extract the specific multipart resource from the returned (or cached) file resource.

    Why won’t this work with some versions of IE?
    Because of several security concerns (see references) many versions of IE will not properly serve multipart/related content when it decides the content mime does not match the URI. Affected platforms are IE7 on Vista/Windows7 and IE6 on any platform after installation of security update MS03-014 (this is an Outlook Express update, but KB330994 explains that IE uses Outlook Express to render MHTML content). In KB825803, Microsoft suggests changing the file extension to “.mht” to solve this problem. The full solution is to make sure the URI and mime-type match, and that they both indicate “Content-Type: multipart/related”. This means that to insure success of the multipart/related stylesheet technique on all versions of Internet Explorer you need to do two simple things. Configure your webserver to serve your file resource as “Content-Type: multipart/related” and ensure that the URI points to a resource ending with “.mht”

    The two simple things:
    ALWAYS use the .mht extension for multipart-encoded (MHTML) stylesheets.
    AND Configure your web daemon to serve this extension as “Content-Type: multipart/related”
    In short, don’t lie to IE about the content of your stylesheet file resource.

    For Apache, there are a few ways to do this:
    In httpd.conf, or any level of .conf file (VirtualHost, Location, Directory, etc) or a relevant .htaccess:
    AddType multipart/related .mht

    In a … block of a relevant apache .conf file or in .htaccess:

    ForceType multipart/related

    For nginx, you can add the following line inside the http { types { … } } block of nginx.conf
    multipart/related mht;

    A few cavets:
    Users can change some of this behavior in IE7 by changing an option:
    Security settings (Miscellaneous section) “Open files based on content, not file extension”

    IE8 Data URIs cannot be larger than 32,768 characters, but IE8 will gladly accept recources (images) of any length using the MHTML resource technique.

  51. Double post, sorry, but in your HMTL you should use the IE Conditional Comment feature to reference your IE only stylesheet, either with a <link… or a @import “… structure

    IE Conditional Comments are a deliberate browser feature, not an hack/exploit, and if you’re deliberately targeting IE are the way to go. Also, this keeps your rather heavyweight resource-loaded multipart/related stylesheet from loading in broswers that can’t or won’t use it.

  52. References:
    http://www.microsoft.com/technet/security/Bulletin/MS07-034.mspx
    http://msdn.microsoft.com/en-us/library/ms775147
    http://support.microsoft.com/kb/825803/
    http://support.microsoft.com/kb/330994/

    Why must full URLs be used in CSS url(…)?
    Internet Explorer processes the mhtml: prefix(protocol) internally before and after sending a GET for the content. What is sent to the server is a normal HTTP GET request for the base resource file, exluding the !(BAM) and the multipart-indicator suffix. For example, if you request mhtml:http://my.example.com/ie-fix.mht!image.png in any version of IE, the browser interprets the mhtml: protocol as a request for multipart/related content and strips the ‘!image.png’ part-reference before sending a GET for http://my.example.com/ie-fix.mht (or before reading the file from cache). Upon recieving a response, IE resumes processing of the mhtml: protocol and uses the previously stripped reference suffix to extract the specific multipart resource from the returned (or cached) file resource.

    Why won’t this work with some versions of IE?
    Because of several security concerns (see references) many versions of IE will not properly serve multipart/related content when it decides the content mime does not match the URI. Affected platforms are IE7 on Vista/Windows7 and IE6 on any platform after installation of security update MS03-014 (this is an Outlook Express update, but KB330994 explains that IE uses Outlook Express to render MHTML content). In KB825803, Microsoft suggests changing the file extension to “.mht” to solve this problem. The full solution is to make sure the URI and mime-type match, and that they both indicate “Content-Type: multipart/related”. This means that to insure success of the multipart/related stylesheet technique on all versions of Internet Explorer you need to do two simple things. Configure your webserver to serve your file resource as “Content-Type: multipart/related” and ensure that the URI points to a resource ending with “.mht”

    The two simple things:
    ALWAYS use the .mht extension for multipart-encoded (MHTML) stylesheets.
    AND Configure your web daemon to serve this extension as “Content-Type: multipart/related”
    In short, don’t lie to IE about the content of your stylesheet file resource.

    For Apache, there are a few ways to do this:
    In httpd.conf, or any level of .conf file (VirtualHost, Location, Directory, etc) or a relevant .htaccess:
    AddType multipart/related .mht

    In a <Directory “path/to/directory”>…</Directory> block of a relevant apache .conf file or in .htaccess:
    <Files ie-fix.mht>
    ForceType multipart/related
    </Files>

    For nginx, you can add the following line inside the http { types { … } } block of nginx.conf
    multipart/related mht;

    A few cavets:
    Users can change some of this behavior in IE7 by changing an option:
    Security settings (Miscellaneous section) “Open files based on content, not file extension”

    IE8 Data URIs cannot be larger than 32,768 characters, but IE8 will gladly accept recources (images) of any length using the MHTML resource technique.

    Also: You should use the IE Conditional Comment feature to reference your IE only stylesheet within your HTML, either with a <link… or a <style type=”text/css”>@import “… structure

    <!–[if (gte IE 5.5)&(lt IE 8)]><style type=”text/css”> @import “/ie-fix.mht”;</style><![endif]–>
    <!–[if (gte IE 5.5)&(lt IE 8)]><link rel=”stylesheet” type=”text/css” href=”/ie-fix.mht”; /><![endif]–>

    IE Conditional Comments are a deliberate browser feature, not an hack/exploit or a quirk, and if you’re targeting IE they are the way to go. This method also keeps your rather heavyweight resource-loaded multipart/related stylesheet from loading in broswers that can’t or won’t use it.

  53. Oh nice this is great stuff, and no downside if you’re already using an IE7 stylesheet (unless IE7 users also download the other one)

  54. I tried Veronica’s suggestion, and confirmed that the page was being served as multipart/related by Apache. However, I still get the “security warning” box when trying to request an image in the mht file on an SSL page, even when the url is “mhtml:https://dev.example.com/ie7.mht

    Any ideas? It would be really nice if this worked over SSL.

  55. Hi! Thanks for the good data, anyway I’d prefer to raise if the ones I also did on my website are applicable to what you stated.

  56. [...] is a must, sprites are cool, but a pain to maintain, so there come data URIs (for all browsers) and MHTML (IE6 and 7). I've talked about these things on this blog to a point where the blog comes up in top [...]

  57. [...] Instead of image sprites you can take a look at Data URIs. It can make you get rid off of big, non-mantainable images files. Just take into account that IE6 and IE7 don’t support this feature, and you should follow the MHTML workaround. [...]

  58. [...] Internet Explorer. While Internet Explorer 6 and 7 don’t support data URIs, they do support MHTML (MIME HTML). MHTML allows data embedded within a resource file to be referenced. In this instance [...]

  59. I just have a question ?

    Can I used MHTML with my image size > 32KB ? it mean all IE (6, 7, 8) can view it ?

  60. [...] Read this article about an alternate technique that does work. [...]

  61. [...]     Data URIs are supported in:      Firefox 2+      Safari – all versions      Google Chrome – all versions      Opera 7.2+      Internet Explorer 8+     你有可能看到了,它并不支持浏览器(MOSG都还是很不错的),特别是IE8之前的系列.IE是一个怪胎,所以如果你想在IE8之前的ie浏览器中支持URI的话,可以参考MHTML – when you need data: URIs in IE7 and under. [...]

  62. This is a risky pattern and I highly recommend that you avoid using it.

    The reason it is risky is that it relies upon a standards-violation: CSS must be delivered with the Content-Type “text/css” but MHT files must be delivered with the Content-Type “message/rfc822″.

    As MIME-type enforcement continues to tighten, it is quite likely that your hybrid “css+MHT” file will stop working.

    Furthermore, this hybrid file also relies upon a violation of the rfc822 format and assumes that the browser will continue to support the leading /* characters before the protocol headers. That could also change in the future.

  63. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.Styling links with pseudo-elementsNicolas [...]

  64. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  65. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.Styling links with pseudo-elementsNicolas [...]

  66. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  67. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  68. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  69. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  70. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  71. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  72. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  73. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.Styling links with pseudo-elementsNicolas [...]

  74. [...] MHTML – when you need data: URIs in IE7 and under [...]

  75. [...] Part of our responsibility as experts in our field is to be up to date on all things related to performance, no matter how seemingly mundane. In January, we stumbled across an IE bug here, which described a serious limitation in MHTML. (Briefly, MHTML is a consolidation technique widely accepted as a good way to reduce total page resources in Internet Explorer browsers. For more background, Stoyan Stefanov has written a couple of good posts here and here.) [...]

  76. Since data URIs in IE8 cannot be larger than 32k characters and I need to show a bigger image, I’m using MHTML even with IE8. Everythig works with 8.0.7600 16385 build but doesn’t with build 8.0.7601.17514 (I tested both versions only on Win7). Does anyone know which is the difference between the two versions?
    Here is the mhtml file:

    /*
    Content-Type:multipart/related;boundary=”BOUNDARY”

    –BOUNDARY
    Content-Location:1
    Content-Transfer-Encoding:base64

    ${put here the encoded image}

    –BOUNDARY–
    */

    Thanks in advance,
    Massimo

  77. IMPORTANT: as of the Jun 11 MHTML security update KB2544893 (also called KB2503658 AIUI), you *MUST* deliver the stylesheet with the MIME type “message/rfc822″, otherwise it will be ignored (including in IE6/7 on XP). That can be done via server configuration or server scripting. On IIS (and poss others) you can simply give your stylesheet the extension “.mht” and that will do the trick.

    IE8 will then also work, FWIW. IE9/10 work too, but present an extra hurdle: the MHTML content must be MIME type “message/rfc822″ (per above), but stylesheets must be “text/css”. That means you can’t have both the MHTML images and CSS rules in the same file – you must use a .css file that references a separate .mht file, then will work perfectly.

    Aside: I tried sniffing the HTTP Accept header and returning a different MIME header accordingly, but IE then treats the file as separate resources and downloads it twice, so better off just using physically separate files.

    Why would we want to use MHTML in IE8+ when “data:” URIs are supported instead? For most use cases, no reason. I do like the fact that you can use images from the cached MHTML pool in inline IMG tags (etc) though – you can’t do that with “data:” URI images (unless use Javascript). e.g.:

    Or how about a script that automatically builds up a collection of the images requested and adds them to the MHTML cache pool:

    Interesting potential; I like the ability to re-use the image wherever you like without JS, just by referencing its name. To emulate this in other browsers, you’d have to use Javascript to cache the base64 data into the new localStorage “super cookie”.

  78. [...] 今天在RSS中看到一篇文章提到前端优化过渡的问题,上面有举一个例子提到了IE(6/7)可以用MHTML来模拟CSS的DATA-URI (中文介绍),我最近两天正在研究前端发布机制,刚好也在看这方面的内容,看完博文觉得有点感触。索性翻译一下,与各位看官共勉。 [...]

  79. [...] The pros: no extra HTTP image request. The cons: IE6/IE7 lack of support (but there’s a solution also for [...]

  80. Hi, i believe that i noticed you visited my weblog so i got here to return the want?.I am attempting to in finding issues to enhance my website!I suppose its ok to use a few of your ideas!!

  81. [...] 以下用の別ファイルを作るのがイヤな方は、「MHTML – when you need data: URIs in IE7 and under」 に IE 用のハックと MHTML [...]

  82. [...] is an MHTML/CSS method you can use to get around this (see here), but it requires an external CSS reference. This wouldn’t work for my offline page since [...]

  83. tools in Ukraine…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  84. china finance,china economy…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  85. De leukste filmpjes gratis plaatsen en bekijken….

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  86. hacking,tricks,gprs,sql,xss,rfi,lfi,tutorial,facebook,forum,password,phishing…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  87. Pc urgence…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  88. I don’t know about you guys but I am always working IE Browser Issues.

    Real Estate IDX

  89. Website Gallery…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  90. I savour, cause I found just what I used to be looking for. You’ve ended my four day long hunt! God Bless you man. Have a great day. Bye

  91. Искитим…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  92. [financing health care|ghanaian economy|primary health care|primary health care services|reproductive health care|sanitation problems|wikipedia the free encyclopedia|women with disabilities]…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  93. GplusOne is the ULTIMATE guide for affiliate marketers looking to profit on Google.
    http://www.gplusonesecrets.com/

  94. IE7 is sometimes very painful to be using.

  95. [...] 则需要使用MHTML协议,这个时候必须使用绝对路径,如《MHTML – when you need data: URIs in IE7 and under》。 [...]

  96. [...] MHTML和Data URI还比较类似,有更强大的功能和更复杂的语法,并且没有Data URI中“无法被重复利用”的缺点,但MHTML使用起来不够灵活方便,比如对资源引用的URL在mht文件中可以是相对地址,否则必须是绝对地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析,如果不修改Content-type则需要使用MHTML协议,这个时候必须使用绝对路径,如《MHTML – when you need data: URIs in IE7 and under》。 [...]

  97. Diseño Web Monteria…

    [...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…

  98. [...] Personally, I’m not a fan of the MHTML technique because it will greatly increases the size of your CSS file (doubling the number of embedded images). In my opinion, this is just too high of a price to pay. It is far simpler to make the images available on your server and just link to them with regular CSS url statements. At least it is for me, if for some reason you would rather take the file size hit instead of publishing the image files then there is a good MHTML how-to article here. [...]

  99. [...] While IE6 and IE7 don’t technically support data URIs, we can achieve something similar using MHTML and a technique pioneered by Stoyan Stefanov. [...]

  100. Otto, how do you see swift scalability when it comes to storing small files (lets say items in the scale of 40-100kB) (and billions of them).

  101. I am curious to find out what blog system you have been using?
    I’m having some small security problems with my latest site and I would like to find something more safeguarded. Do you have any suggestions?

  102. Hello my family member! I want to say that this article is awesome, nice written and include almost all significant infos. I’d like to see more posts like this .

  103. [...] Read this article about an alternate technique that does work. [...]

  104. Heya i’m for the first time here. I found this board and I find It really useful & it helped me out a lot. I’m hoping to provide one thing again and help others like you helped me.

  105. Everything is very open with a very clear explanation of the challenges.
    It was really informative. Your website is very helpful. Many thanks for sharing!

  106. Hi,

    i’m wondering if it would be possible to use this technique to embed a font for IE 7-8 (so eot file would be base64 encoded).

    Any ideas on how this could be achieve?

    Thanks

  107. Hi! I’m at work browsing your blog from my new iphone 3gs! Just wanted to say I love reading your blog and look forward to all your posts! Keep up the superb work!

  108. [...] could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as [...]

  109. I’ve been exploring for a little bit for any high quality articles or weblog posts on this kind of house . Exploring in Yahoo I finally stumbled upon this site. Studying this information So i’m satisfied to exhibit that I have a very excellent uncanny feeling I discovered exactly what I needed. I most indubitably will make certain to do not omit this web site and give it a look on a constant basis.

  110. Hi, I have twisted the mhtml link in the css many ways but couldn’t get it work. Thanks for the useful post and this great article! I just wonder how it’s going to work if I embed the css within the html file? Thanks again so much!

  111. [...] effective. The pros: no extra HTTP image request. The cons: IE6/IE7 lack of support (but there’s a solution also for [...]

  112. Мне понравилась статья. Очень интересно и занимательно

  113. I all the time used to study paragraph in news papers but now as I am a user
    of internet thus from now I am using net for articles,
    thanks to web.

  114. I like the helpful information you provide in your articles. I will bookmark your blog and check again here frequently. I’m quite sure I’ll learn a lot of new stuff right here! Best of luck for the next!

  115. Hmm it looks like your site ate my first comment (it was extremely long) so I
    guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying
    your blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any tips and hints for newbie blog writers? I’d definitely appreciate it.

  116. Howdy would you mind letting me know which web
    host you’re utilizing? I’ve loaded your blog in 3 different
    web browsers and I must say this blog loads a lot quicker
    then most. Can you recommend a good internet hosting provider at a reasonable
    price? Thanks a lot, I appreciate it!

  117. I do not even understand how I finished up right here, however
    I thought this post was once great. I don’t realize who you are however definitely you’re going to a well-known blogger should you are not already.

    Cheers!

  118. Magnificent goods from you, man. I have understand your stuff previous to and you are just too excellent.
    I actually like what you’ve acquired here, really like what you are saying and the way in which you say it. You make it entertaining and you still care for to keep it sensible. I can not wait to read much more from you. This is really a wonderful web site.

  119. Good article! We are linking to this great content on our site.

    Keep up the great writing.

  120. [...] effective. The pros: no extra HTTP image request. The cons: IE6/IE7 lack of support (but there’s a solution also for [...]

  121. [...] starszych wersjach. Stoyan Stefanov, również pracownik Yahoo!, opisał to zagadnienie w artykule MHTML – when you need data: URIs in IE7 and under i pokrewny problem w Vista oraz Windows 7 Data URIs, MHTML and IE7/Win7/Vista [...]

  122. […] Personally, I’m not a fan of the MHTML technique because it will greatly increases the size of your CSS file (doubling the number of embedded images). In my opinion, this is just too high of a price to pay. It is far simpler to make the images available on your server and just link to them with regular CSS url statements. At least it is for me, if for some reason you would rather take the file size hit instead of publishing the image files then there is a good MHTML how-to article here. […]

  123. Can I simply just say what a relief to discover somebody that really knows what
    they’re talking about online. You certainly know how to
    bring a problem to light and make it important.
    A lot more people must read this and understand this side of the story.

    I was surprised you aren’t more popular since you most certainly possess the gift.

  124. Your method of explaining everything in this article
    is genuinely good, all be able to easily understand it, Thanks a lot.

  125. […] MHTML和Data URI还比较类似,有更强大的功能和更复杂的语法,并且没有Data URI中“无法被重复利用”的缺点,但MHTML使用起来不够灵活方便,比如对资源引用的URL在mht文件中可以是相对地址,否则必须是绝对地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析,如果不修改Content-type则需要使用MHTML协议,这个时候必须使用绝对路径,如《MHTML – when you need data: URIs in IE7 and under》。 […]

  126. It’s not my first time to pay a visit this web
    page, i am visiting this web page dailly and obtain fastidious facts from here every day.

  127. […] Original Post: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ […]

  128. With havin so much content do you ever run into any problems
    of plagorism or copyright infringement? My site has a lot of unique content I’ve either authored myself or outsourced but it looks
    like a lot of it is popping it up all over the internet without my authorization.
    Do you know any solutions to help stop content from
    being ripped off? I’d definitely appreciate it.

  129. It’s actսally a nice and useful piece of іnfo. Ι’m sɑtisfied
    that you simply shared this helpful info with us. Please keep us up to date like this.
    Thank you for sharing.

  130. Hello, after reading this remarkable piece of writing i am as well cheerful to share my experience here
    with friends.

  131. […] be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as […]

  132. Hi there friends, its great piece of writing on the topic of educationand completely defined, keep it up all the time.

  133. I like the valuable info you provide in your articles. I will bookmark your weblog and check again here frequently.
    I am quite certain I will learn plenty of new stuff right here!
    Good luck for the next!

  134. This design is spectacular! You obviously know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start mmy own blog (well, almost…HaHa!) Great job.
    I really enjoyed what you had to say, and more than
    that, how you presented it. Too cool!

  135. I simply couldn’t depart your site prior to suggesting that I actually enjoyed the standard info
    a person supply for your guests? Is gonna be again steadily to inspect new posts

  136. It’s nearly impossible to find experienced
    people in this particular subject, but you sound like you know
    what you’re talking about! Thanks

  137. With havin so much content do you eever run into
    any problems of plagorism oor opyright infringement?
    My blog has a llot of exclusive content I’ve either create myselof or outsourced but it seems a lot of
    it is popping iit up all over the web without my permission.
    Do you know any techniques to help protect against content from being
    stolen? I’d really appreciate it.

  138. Remarkable! Its truly awesome article, I have got much clear idea about from this article.

  139. ok so it’s good ? It’s a pleasure to read.

  140. Fine way of telling, and fastidious paragraph to
    take information regarding my presentation subject matter, which i am going to convey in college.

  141. Hiya very nice site!! Guy .. Excellent .. Amazing ..

    I’ll bookmark your site and take the feeds additionally?
    I’m satisfied to find so many helpful info here in the submit, we’d like work out more strategies on this
    regard, thanks for sharing. . . . . .

  142. If you are going for most excellent contents like
    I do, just pay a visit this site daily for the reason that it provides quality contents, thanks

  143. I was wondering if you ever considered changing the layout of your site?
    Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with
    it better. Youve got an awful lot of text for only having 1 or two pictures.
    Maybe you could space it out better?

  144. Apρreciate thе recommendation. Let mе try it оut.

Leave a Reply