Introduction to data Uri and Base 64 Encoding

Preface (nonsense): this strange line of code was found during the drumming of stylish:

Data:image/gif;BASE64,R0lGODlhEAAQAKEAAEKF9NPi/AAAAAAAACH5BAEAAAIALAAAAAAQABAAAAIkFI6Zpu0YYnxnAvtC0hTzzH3UJY6kSUqdiCltu7GjBKMKgwoFADs=

Because I have a little html/CSS Foundation, I can see that this is referencing images. But is such a long garbled string behind the image address? After a long query (the breakthrough point is base64, I remember this is an encryption method), I finally learned something. Below is my excerpt + personal notes.

What is uri?

Note: It is a URI, not a URL. a url is the abbreviation of Uniform Resource Locator. It is a combination of a specific resource protocol (how to obtain data) and an address. Each publicly accessible resource, sample, JS, HTML, or style sheet file has a URL that tells the browser where to download them. The browser creates a link based on the URL and starts to download or execute the file. A URL is actually a URI, which is short for uniform resource identifier. Uri specifies a protocol to receive information, including additional information about resources. The extra information may be an address or not (If yes, the URI is a URL), but it is always associated with a specific protocol. Data URI is a type of Uri. It does not contain addresses, so it is not a URL.

 

Data URI format

The format of data URI is very simple. You can refer to the instructions in RFC 2397.

The basic format is as follows:

Data:[<mime type>][;charset=<charset>][;BASE64],<encoded Data>

In this format, data: Is a URI protocol and declares that this is a data Uri. The second part, MIME type, indicates the type of data to be presented. For example, the MIME type of a PNG image is image/PNG. If this parameter is not specified, the MIME type is text/plain by default. Charset is a collection of characters, including Chinese characters and some special characters, that is, encoding. For details, refer to here. Charset can be ignored in most cases. It is useless for images. The next section specifies the encoding used. You do not need to use base 64 encoding. If the content is not encoded using Base 64, the data will be encoded using the standard URL (the URL-safe ASCII characters will be displayed as they are, others are displayed as hexadecimal encoding in % XX format.

 

Data URI Defects

Rfc2397 defines a data URI to embed small data into a webpage without loading it from an external file. In this way, in addition to reducing HTTP requests, there is also a benefit that you do not need to upload an image file to FTP, so there will be no image leeching problem.

Data URI is not a disadvantage --

• Base 64 encoding will increase the file content by about 33% (although the file becomes larger, it reduces the amount of data generated by HTTP, which actually saves width)
• Data URI is not cached by the browser. Therefore, each time the content is loaded, it must be downloaded again.
• If the content is updated, a new encoding is required.
• Data URI will make the Code look messy
• Size limit. According to the data URI specification, data Uri has character restrictions. IE8 only supports 32768 bytes, about 32 KB
• Browsers below IE8 do not support this definition. You must understand that many Chinese people are still using IE6

 

About Base 64 Encoding

Base 64 encoding is an encoding rule in which data is converted into binary code and then combined into a sequence of Base 64 characters. Base 64 characters include uppercase and lowercase letters A to Z, numbers, symbols + and /. = Is used for filling. You can refer to Wikipedia instructions. What you really need to know is that base 64 encoding will make the encoded data smaller.

For example:

The following example shows the data URI of a GIF image encoded with Base 64:

Data:image/gif;BASE64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge 8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g 77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7 

If the same image does not use Base 64 encoding, it will be shown as follows:

Data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85 %FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE %CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00 %00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08 %13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C %A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80 %80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84 %02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D %BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7 %AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07 %02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03 %AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B 

Note: Base 64 encoding actually increases the image size. However, if you use HTTP compression, you will not be aware of any difference, because the data of Base 64 encoding is extremely compact. If HTTP compression cannot be used for some reason, you may want to know the size of the data you sent, and then weigh whether it is worth doing so.

 

How can I make the image code after Base 64 encoding shorter?

The main method is to use image optimize for compression. Image optimize will lose transparent information when compressing PNG images, while GIF images will not, and the GIF size is generally smaller than PNG, therefore, first use other software to convert PNG to gif, and then use image optimize for compression.

 

　　

Online tools: http://duri.me/

You can refer:

Http://www.cnblogs.com/lhb25/archive/2012/11/22/web-based-data-uri-generator-duri-me.html

Http://www.cnblogs.com/FlyCat/archive/2013/04/01/2994269.html

Http://ntesmailfetc.blog.163.com/blog/static/2062870612012453590711/