[Frontend Guide]: Base64 encoding for playful images,

[Frontend Guide]: Base64 encoding for playful images,

　　Introduction　　

Image processing plays an important role in front-end work. The Base64 encoding of images may be relatively unfamiliar to some people. This article does not discuss the base64 encoding of images from a purely technical perspective. The title is a little large, but I just want to let you know what is the base64 encoding of the image through some simple discussions. Why should we use it? How can we use it conveniently, and let you know how to use it in front-end practical work.

 

What is base64 encoding?

I am not talking about the concept. I just want to get into the question. The base64 encoding of an image can be used to encode a pair of image data into a string that replaces the image address.

What is the significance of doing so? We know that every image on the webpage we see needs to be downloaded using an http request (all of them have the CSS Sprites technology, but CSS Sprites has its own limitations, ).

Yes, in any case, the image download request must always be sent to the server. If the image download does not need to be sent to the server, but can be downloaded to the local device at the same time with the HTML download, that would be great, base64 can solve this problem.

So what is the base64 encoding length of the image? For example. The search icons on the right of the search box on the homepage of www.google.com use base64 encoding. We can see that:

　　

 

1 // In css 2 # fkbx-spch, # fkbx-hspch {3 background: url (data: image/gif; base64, encoded // yH5B... EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs =) no-repeat center; 4 5... 6}

1 // In the img tag of html code 2 

The above is the base64 encoding method of the image in css and in the html label. Base64 encoding looks like this. Of course, base64 encoding is not only used in image encoding, but also:

Thunder: // rewrite (do not copy me. I am not a seed)

Hey, that's right. Thunder's "dedicated address" is encrypted with Base64. If you are interested in google, do not repeat it.

 

Why Base64 encoding?

So why use base64 to transmit image files? As mentioned above, this can save an http request. The base64 encoding of the image can be regarded as a part of front-end optimization. Although the benefits are small, they lack the ability to accumulate more.

Here, we have to mention the CssSprites technology, which combines many small images on the page into a large image to reduce http requests. So what are the similarities and differences between the base64 encoding and CssSprites of the image, and how can we choose between them?

Therefore, here we need to clarify the premise of using base64, that is, the base64 encoded image is small enough. Take the blog Park logo as an example:

　　

The blog garden Logo is only 3.27KB, and it is very small. However, if you convert it into base64 encoding, the generated base64 string is fully encoded with 4406, that is, after the image is encoded, the size of the generated string encoding is generally slightly larger than that of the original file. Even if base64 encoding can be compressed by gzip, the compression ratio can reach more than 50%. Imagine that the css style of an element has been written by more than 2000 characters, the overall readability of css will be greatly affected. The Code redundancy will not be worth the candle if base64 encoding is used here.

Does it mean base64 encoding is useless? Otherwise. When the images on the page meet the following requirements, base64 can be used to display images.

　　If the image is small enough and cannot be made into a Sprite due to its special usage, the reuse of the entire website is very high and will not be updated.. At this time, the base64 encoding can be used to transmit images. If we think about it, we will often see the background-image of the page. In many places, we will make a very small image which is about a few px * a few px, and then tile the page as the background image. Because it is a background image, it cannot be put into a Sprite image, but it has many pages on the website. This image is usually dozens of bytes, but requires an http request, which is not worth it. Why not convert it to base64 encoding?

The following is a 50-byte 2*2 background image. It is converted to base64 encoding with more than 100 characters. This conversion is undoubtedly more worthy of praise than an http request.

　　

 

CssSprites and Base64 encoding

Briefly describe my views on when to use these two optimization methods.

　　Use CssSprites to merge into a large image:

• Pages have multiple styles and require skin replacement. You can use CssSprites.
• The website has become perfect and will not be changed in three days (such as button size and color)
• No need to repeat the image content during use
• There is no base64 encoding cost, which makes it easier to maintain image updates. (However, it may be difficult for Sprites to modify css and images at the same time)

 

　　Use base64 to encode the image into a string and write it into the CSS file:

• No additional requests
• For extremely small or extremely simple images
• Can be gzip. (The ability to compress base64 data through gzip is usually similar to or stronger than that of image files)
• Reduced css maintenance difficulty
• It can be used like a single image, for example, a duplicate background image.
• No cross-origin problems. You do not need to consider caching, file headers, or cookies.

 

It is easier to convert an image into Base64 encoding

There are many tools to convert images into base64 encoding, such as the http://www.pjhome.net/web/html5/encodeDataUrl.htm I used in this article, but many of these websites are foreign websites, often cannot be logged on by the wall. Here we will introduce a more convenient method, that is, using the Chrome browser (I think FEer should have Chrome browser =. = ).

Create a new window in chrome, drag the image to be converted directly into the browser, open the console, click Source, as shown in, and click the image. The base64 encoding of the image is displayed on the right, is it very convenient.

　　

 

　　

The original article is limited in writing, so it is easy to learn. If there is anything wrong with the article, please let us know.