The data URL of HTML

The Data URL gives us a clever way to "embed" the image into HTML. Unlike the traditional way of usingimgtags to refer pictures on a server to a page, in the Data URL protocol, the picture is converted to a base64 encoded string and stored in the URL, labeled Mime-type. In this article, I'll show you how to use the data URL to optimize the speed and efficiency of your site's loading.

1. Data URL Fundamentals

Data URL technology, the image is embedded in the Base64 string format into the page, and HTML as a whole, its form is as follows:

        <img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
            yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
            ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
            LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
            k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
            ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw=="> 

Almost all modern browsers support data URL format, including Mozilla Firefox, Google Chrome, Safari browser, Opera browser. IE8 is also supported, but with some limitations, IE9 is fully supported.

IE6/7 is not supported by data URL technology.

2. Why the data URL is a good thing

The Data URL can be used in many situations, compared with the traditional method of external resource reference, it has the following unique uses:

• When accessing external resources is cumbersome or limited
• When a picture is dynamically generated on the server side with the program, each access user is not displayed at the same time.
• When the volume of the picture is too small, it is not worthwhile to occupy an HTTP session.

The Data URL also has some applications that are not applicable

• BASE64 encoded data volume is usually the original data volume 4/3, that is, the data URL in the form of a picture will be larger than the binary format picture size 1/3.
• Images in the form of Data URLs are not cached by the browser, which means that each time a page is accessed, it is downloaded once. This is a matter of efficiency-especially when the image is heavily used by the entire site.

However, these disadvantages of the Data URL can be completely avoided or transformed. The focus of this article is to discuss this issue.

3. Using the data URL in CSS

When you first see the role and usage of the data URL, you may not be puzzled, "why bother to convert images into Base64 encoded strings, embed Web pages, confuse HTML code, and even have performance problems." ”

Admittedly, there's no denying the importance of caching in browser performance-how can you put data URLs into the browser cache? The answer is: through CSS style files. The operator in the CSSurlis used to specify the background image of the page element, and the browser does not care what is written in the URL-as long as it can get the data needed. So, we have the possibility of storing a picture in the form of a data URL in a CSS style sheet. All browsers will actively cache CSS files to improve page loading efficiency.

Assuming we have a small element in our pagediv, we want to use a grey twill pattern to do its background, a background that is popular with today's web designers. The traditional approach is to make a 3x3 pixel image, save it in GIF or PNG format, and thenbackground-imagereference its address in the CSS properties. The data URL is a more efficient alternative, as in the following.

<style>
.striped_box {
width: 100px;
height: 100px;
background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
border: 1px solid gray;
padding: 10px;
}
</style>
<div class="striped_box lazy ">
This is a striped square
</div> 

4.Data URL problem

When it comes to the advantages of the data URI, it naturally involves "reducing the number of links" and converting the image to Base64 encoding to reduce the number of links to the image. Let's take it for granted, the same picture, if you don't have to launch a download request, the speed will be faster. However, there are several issues that need to be followed:

• Picture is always to download, then download a picture fast or download a bunch of coding fast?
• Browser to the picture display, processing efficiency which is faster?
• Caching problems with pictures

5.DataURL compatibility Summary in a Web browser

2. The data URL is generally supported by modern browsers such as Ie8+,firefox,chrome,opera,safari
4. The maximum length of the IE8 data URL is limited to 32k bytes and is out of effect. Ie9+ There's no such limit.
6. IE only recognizes base64 encoding or percent encoding (URL encoding, encodeuricomponent) data Url,ie does not recognize the data URL without encoding, non-IE can recognize the data URL without encoding
8. IE does not support the SRC setting of the <iframe>,<frame> tag data URL
10. IE officially says the data URL supports only the following 5 usage scenarios:
    • Object (images only)
    • Img
    • Input Type=image
    • Link
    • CSS declarations that accept a URL
12. According to my actual measurements, ie also in addition to the official 5 of other occasions to support the data URL:
    1. a href
    2. Meta Refresh. Example:

       1. <http-equiv= "Refresh"  content= "5; Url=data:text/html;base64,xxxx. "> 

    3. Script src
    4. window.open
    5. Embed SRC
14. For audio, video-type elements, often resource files are large, using the data URL is not common, I did not test it.
16. Firefox paste is directly converted to the data URL of the picture, other browsers simply can not paste, I remember the previous Chrome seems to be able to paste, today again test Chrome,opera can not paste (<div contenteditable><   /div> do the test). (paste is often used for online Rich text editor)
18. You can specify the character set encoding for the data URL. Example: Data:text/plain;charset=us-ascii,xxxx ....

Appendix:

Dataurl Syntax Rules:

   dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
       mediatype  := [ type "/" subtype ] *( ";" parameter )
       data       := *urlchar
       parameter  := attribute "=" value

HTML Data URL (GO)