Data URI and MHTML complete solution for all browsers

Data URI

Data URI is a scheme defined by RFC 2397 for embedding small files directly into documents. The following syntax can be used to convert small files into specified encoding and embed them directly into the page:

data:[<MIME-type>][;base64],<data>

1. MIME-type: Specifies the MIME type of the embedded data. Its format is [type]/[subtype]; parameter. For example, the MIME corresponding to png images is image/png. parameter can be used to specify additional information, and more often it is used to specify the charset parameter for text encoding such as text/plain and text/htm. The default is text/plain;charset=US-ASCII.
2. base64: declares that the following data is encoded in base64, otherwise the data must be percent-encoded (that is, urlencode the content).

The Data URI scheme was introduced in HTML4.01 in the last century. To date, all major browsers support it except IE6 and IE7. However, IE8 still has limited support for Data URI, and only supports object (only for pictures), img, input type=image, link, and URLs in CSS, and the data size cannot be greater than 32K.

advantage:

1. Reduce the number of HTTP requests, eliminate the TCP connection consumption and the concurrent number limit of browsers under the same domain name.
2. For small files this will reduce bandwidth. Although the amount of data will increase after encoding, the http header is reduced. When the amount of data in the http header is greater than the increase in file encoding, the bandwidth will be reduced.
3. For HTTPS sites, there will be security prompts when mixing HTTPS and HTTP, and HTTPS has a much larger overhead than HTTP, so Data URI has a more obvious advantage in this regard.
4. The entire multimedia page can be saved as a file.

shortcoming :

1. It cannot be reused. If the same content is used multiple times in the same document, it needs to be repeated multiple times, which greatly increases the amount of data and the download time.
2. Cannot be cached independently, so it will be reloaded when its containing document is reloaded.
3. The client needs to decode and display again, which increases the consumption.
4. Data compression is not supported. Base64 encoding will increase the size by 1/3, and urlencoded data will increase the size even more.
5. It is not conducive to the filtering of security software and there are certain security risks.

MHTML

MHTML is the abbreviation of MIME HTML (Multipurpose Internet Mail Extension HTML), which is defined by RFC 2557 as a solution for saving all contents of a multimedia page into the same document. This solution was proposed by Microsoft and has been supported since IE5.0, and Opera9.0 also started to support it. Safari can save files in .mht (MHTML file suffix) format, but does not support displaying it.

MHTML is quite similar to Data URI, but has more powerful functions and more complex syntax, and does not have the disadvantage of "cannot be reused" in Data URI. However, MHTML is not flexible and convenient to use. For example, the URL for resource reference in the mht file can be a relative address, otherwise it must be an absolute address. The reason hedger's solution for IE in "Cross Browser Base64 Encoded Images Embedded in HTML" uses relative paths is because the declaration of Content-type:message/rfc822 makes IE parse according to MHTML. If the Content-type is not modified, the MHTML protocol needs to be used. At this time, absolute paths must be used, such as "MHTML - when you need data: URIs in IE7 and under".

application

The combination of Data URI and MHTML can completely solve all mainstream browsers. Since they cannot be cached and reused, they are not suitable for direct use in web pages, but they have great advantages when used appropriately for images in CSS and JavaScript files:

1. Greatly reduce the number of requests. Nowadays, the CSS of large websites references a large number of image resources.
2. Both CSS and JavaScript can be cached, which indirectly implements data caching.
3. Using CSS can solve the problem of Data URI reuse
4. Say goodbye to CSS Sprites. CSS Sprites was created to reduce the number of requests. However, in addition to causing exceptions in uncertain situations, CSS Sprites also requires manual image merging. Even with merging tools, you still have to spend a lot of time manually figuring out how to effectively put the puzzle together, which brings maintenance difficulties. Once you follow certain design principles, you can completely abandon CSS Sprites to write CSS, and finally use tools to convert images into Data URI and MHTML when uploading them to the server, such as the tool implemented in Python in "Using data-uri to merge style sheets and images", which can save a lot of time.
5. Base64 encoding increases the size of image files by 1/3, and using Data URI and MHTML together is equivalent to increasing it by 2/3. However, CSS and JavaScript can be compressed using gzip, which can save 2/3 of the data. Therefore, the final data size after gzip compression is (1 + 1/3) * 2 * (1/3) = 8/9, so the final traffic is reduced.

To facilitate the implementation of Data URI and MHTML in CSS, I wrote a Data URI & MHTML generator. You can see how to use it to generate Data URI & MHTML application examples.

When using MHTML in a CSS file, the URL must use an absolute path, which is very inflexible. So you can consider using CSS expression to solve this problem (DEMO), for example:

/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(this));