MHTML – when you need data: URIs in IE7 and under
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 
This entry was posted on Friday, April 10th, 2009 and is filed under CSS, IE, images, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
April 10th, 2009 at 9:53 am
[...] Continued here: MHTML – when you need data: URIs in IE7 and under [...]
April 10th, 2009 at 6:05 pm
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.
April 10th, 2009 at 6:07 pm
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.
April 10th, 2009 at 6:11 pm
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).
April 10th, 2009 at 8:34 pm
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
April 11th, 2009 at 9:00 pm
[...] MHTML – when we need data: URIs in IE7 as well as under [...]
April 13th, 2009 at 1:27 am
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.
April 13th, 2009 at 1:51 am
Hey Hedger, nope, only XP virtual machine.
April 14th, 2009 at 12:33 pm
Tested this technique out on Windows Vista with IE7 and the background images are not viewable.
April 14th, 2009 at 9:53 pm
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?
April 15th, 2009 at 6:22 pm
[...] MHTML – when you need data: URIs in IE7 and under / phpied.com [...]
April 17th, 2009 at 10:44 am
@anthony – yep, that’s a drawback. One solution would be to include browser-specific stylesheets.
April 21st, 2009 at 2:52 pm
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.
April 22nd, 2009 at 3:27 pm
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.
April 27th, 2009 at 2:15 am
[...] MHTML – when we need data: URIs in IE7 as well as under [...]
April 29th, 2009 at 3:48 am
[...] Explorer: Data-URIs in IE7 and under – Der IE8 kann es von Haus aus und mit diesem Trick auf die älteren [...]
May 15th, 2009 at 8:13 am
[...] 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). … [...]
May 18th, 2009 at 12:58 pm
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
May 29th, 2009 at 11:20 am
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
May 31st, 2009 at 10:44 pm
[...] Phpied.com – MHTML – when you need data: URIs in IE7 and under [...]
June 14th, 2009 at 12:06 pm
Has anybody written a canvas API for this yet?
June 21st, 2009 at 4:18 pm
[...] 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 [...]
July 13th, 2009 at 11:15 pm
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!
July 14th, 2009 at 1:49 am
Which tag, Caren? Seems like the tag was stripped from your comment
July 14th, 2009 at 11:56 am
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 !
July 29th, 2009 at 12:46 am
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
August 15th, 2009 at 11:57 am
[...] 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》。 [...]
August 24th, 2009 at 3:19 pm
@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
September 1st, 2009 at 12:24 am
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.
September 3rd, 2009 at 5:12 am
very nice post
September 28th, 2009 at 4:36 am
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?
September 28th, 2009 at 12:18 pm
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
September 29th, 2009 at 6:54 am
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…
October 6th, 2009 at 1:05 am
[...] 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 [...]
October 6th, 2009 at 1:43 am
[...] This post was Twitted by zigazou [...]
October 6th, 2009 at 2:44 am
@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.
October 27th, 2009 at 8:04 am
[...] 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 [...]
October 28th, 2009 at 8:02 am
[...] 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 [...]
October 29th, 2009 at 4:04 am
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!
November 2nd, 2009 at 11:48 am
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.
November 5th, 2009 at 5:21 am
Awesome! But why not just use the MHTML method for all browsers, instead of implementing both?
November 5th, 2009 at 5:42 am
nevermind… mhtml is not supported…
November 16th, 2009 at 1:52 pm
[...] 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 [...]
November 16th, 2009 at 4:33 pm
[...] only came across the MHTML image hack over the weekend, while listening to @jeresig on the new jQuery podcast (incidentally not the only [...]
November 26th, 2009 at 11:15 am
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
January 13th, 2010 at 3:57 pm
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).
April 12th, 2010 at 7:39 am
*bump* this last question re MHTML files being server via HTPPS but failing.
August 11th, 2010 at 10:35 am
My tests with IE6 doesn’t work with PNG24 images.
Does anyone has tested PNG24 images with transparence?
September 7th, 2010 at 3:45 am
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
September 25th, 2010 at 2:06 pm
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.
September 25th, 2010 at 2:15 pm
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.
September 25th, 2010 at 2:32 pm
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.
October 14th, 2010 at 4:10 pm
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)
October 20th, 2010 at 11:23 pm
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.
October 25th, 2010 at 1:11 am
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.
November 16th, 2010 at 11:27 am
[...] 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 [...]
November 16th, 2010 at 6:16 pm
[...] 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. [...]
November 22nd, 2010 at 3:16 pm
[...] 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 [...]
November 24th, 2010 at 11:48 pm
I just have a question ?
Can I used MHTML with my image size > 32KB ? it mean all IE (6, 7,
can view it ?
November 30th, 2010 at 4:03 am
[...] Read this article about an alternate technique that does work. [...]
December 25th, 2010 at 1:13 pm
[...] 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. [...]
February 19th, 2011 at 12:31 pm
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.
March 19th, 2011 at 1:35 pm
[...] 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 [...]
March 19th, 2011 at 3:37 pm
[...] 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 [...]
March 19th, 2011 at 8:11 pm
[...] 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 [...]
March 19th, 2011 at 8:48 pm
[...] 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 [...]
March 19th, 2011 at 10:55 pm
[...] 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 [...]
March 20th, 2011 at 1:52 am
[...] 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 [...]
March 20th, 2011 at 4:47 am
[...] 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 [...]
March 20th, 2011 at 6:28 am
[...] 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 [...]
March 20th, 2011 at 9:05 pm
[...] 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 [...]
March 20th, 2011 at 11:12 pm
[...] 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 [...]
April 1st, 2011 at 8:45 am
[...] 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 [...]
April 19th, 2011 at 4:52 pm
[...] MHTML – when you need data: URIs in IE7 and under [...]
April 28th, 2011 at 6:05 pm
[...] 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.) [...]
July 5th, 2011 at 10:09 am
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
August 31st, 2011 at 10:23 pm
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”.
October 13th, 2011 at 9:08 pm
[...] 今天在RSS中看到一篇文章提到前端优化过渡的问题，上面有举一个例子提到了IE（6/7）可以用MHTML来模拟CSS的DATA-URI （中文介绍），我最近两天正在研究前端发布机制，刚好也在看这方面的内容，看完博文觉得有点感触。索性翻译一下，与各位看官共勉。 [...]
November 8th, 2011 at 4:23 pm
[...] The pros: no extra HTTP image request. The cons: IE6/IE7 lack of support (but there’s a solution also for [...]
November 23rd, 2011 at 4:11 am
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!!
November 23rd, 2011 at 9:14 am
[...] 以下用の別ファイルを作るのがイヤな方は、「MHTML – when you need data: URIs in IE7 and under」 に IE 用のハックと MHTML [...]
December 28th, 2011 at 11:28 am
[...] 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 [...]
January 11th, 2012 at 10:06 am
tools in Ukraine…
[...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…
January 13th, 2012 at 11:29 am
china finance,china economy…
[...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…
January 13th, 2012 at 1:16 pm
De leukste filmpjes gratis plaatsen en bekijken….
[...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…
January 14th, 2012 at 7:53 am
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[...]…
January 18th, 2012 at 4:57 pm
Pc urgence…
[...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…
January 19th, 2012 at 8:38 pm
I don’t know about you guys but I am always working IE Browser Issues.
Real Estate IDX
January 20th, 2012 at 12:36 pm
Website Gallery…
[...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…
January 20th, 2012 at 4:37 pm
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
January 21st, 2012 at 11:46 pm
Искитим…
[...]MHTML – when you need data: URIs in IE7 and under / Stoyan’s phpied.com[...]…
January 24th, 2012 at 10:29 pm
[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[...]…
January 27th, 2012 at 8:29 am
GplusOne is the ULTIMATE guide for affiliate marketers looking to profit on Google.
http://www.gplusonesecrets.com/