[Front-end strategy]: Play with image Base64 encoding_html/css_WEB-ITnose

　Introduction　

　Image processing plays a very important role in front-end work. The Base64 encoding of images may be unfamiliar to some people. This article is not about discussing the base64 encoding of images from a purely technical perspective. The title is a little big, but I just hope that through some simple discussions, you can know what base64 encoding of images is, why we use it, how we use it and use it conveniently, and let you know how to do it in the actual work of the front end. Use it.

What is base64 encoding?

I’m not here to talk about concepts. Let’s get right to the point. The base64 encoding of a picture means that you can convert a picture into The data is encoded into a string, which is used in place of the image address.

What’s the point of doing this? We know that every picture on the web page we see needs to be downloaded by consuming an http request (this is why csssprites technology came into being, but csssprites has its own limitations, which will be mentioned below ).

Yes, no matter what, the download of pictures always requires a request to the server. It would be great if the download of pictures does not require a request to the server, but can be downloaded to the local machine at the same time as the download of HTML. And base64 can solve this problem.

So what does the base64 encoding of the image look like? Give me a chestnut. The small search icon on the right side of the search box on the homepage of www.google.com uses base64 encoding. We can see:

　

1 //在css里的写法2 #fkbx-spch, #fkbx-hspch {3     background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;4  5     ...6 }

1 //在html代码img标签里的写法2 <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

The above are the base64 encoding of the image in css The writing method inside and the writing method in the htmla1f02c36ba31691bcfe87b2722de723b tag. Base64 encoding looks like this. Of course, base64 encoding is not only used for image encoding, but also:

Thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa (don’t copy me, I’m really not a seed)

Hey, no Wrong, Xunlei's "private address" is also encrypted with Base64. If you are interested, you can google it yourself, so I won't go into details.

Why use Base64 encoding? ​

So why do you need to use base64:URL to transfer image files? It is also mentioned above, because this can save an http request. The base64 encoding of images can be regarded as a part of front-end optimization. Although the benefit is small, it can add up to a small amount.

Speaking of this, I have to mention the CssSprites technology, which also merges many small pictures on the page into one large picture in order to reduce http requests. So what are the similarities and differences between base64 encoding of images and CssSprites, and how to choose between them?

Therefore, a prerequisite for using base64 must be made clear here, that is, the image encoded by base64 is small enough. Take the blog park's logo as an example:

As shown in the figure below, the blog park's logo is only 3.27KB, which is already very small. However, if it is converted into base64 encoding, the generated There are 4406 base64 string encodings. Even if the base64 encoding can be compressed by gzip, the compression rate can reach more than 50%. Imagine that the CSS style writing of an element exceeds 2000 characters. This will have a great impact on the overall readability of the CSS. The code The redundancy makes using base64 encoding here a waste of money.

So, does this mean that base64 encoding is useless? otherwise. When the images on the page meet the following requirements, base64 can come into play.

　If the image is small enough and cannot be made into sprites (CssSprites) due to the specific use, it will be highly reusable throughout the website and will basically not be updated . So using base64 encoding to transmit images at this time can be said to be good steel used on the blade. After thinking about it, one of the things that conforms to this rule is one that we often encounter, which is the background-image of the page. In many places, we will make a very small picture, about a few px*several 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 exists on many pages of the website. Such images often only have a few dozen bytes, but require an http request, which is not worth it. So why not convert it to base64 encoding at this time?

The following is a 2*2 background image with only 50 bytes. Convert it into base64 encoding, which has only more than 100 characters. Compared with an http request, this conversion is undoubtedly more worthy of praise.

　

CssSprites and Base64 encoding

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

　Use CssSprites to merge into one large image:

The page has a variety of styles. If you need to change the skin, you can use CssSprites

The website has become perfect and will not be changed every three days (such as button size, color, etc.)

No need to repeat graphic content when using it

There is no base64 encoding cost, which reduces the maintenance difficulty of image updates. (But note that Sprites may sometimes cause a burden when modifying CSS and images at the same time)

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

No additional requests

For very small or very simple images

can be gzipped. (The compression capability of base64 data through gzip is usually similar to or stronger than that of image files)

Reduce the difficulty of css maintenance

Can be used like a separate image, such as repeated use of background images, etc.

No cross-domain issues, no need to consider caching, file headers or cookies

It is more convenient to convert images into Base64 encoding

There are many tools to convert images into base64 encoding, such as the one I used in this article http://www.pjhome.net/web/html5/encodeDataUrl.htm. However, many of these websites are foreign websites and are often blocked and cannot be logged in. Here is a faster method, which is to use the Chrome browser (I think all FEers should have a Chrome browser =.=).

Create a new window under chrome, then drag the image to be converted directly into the browser, open the console, click Source, as shown in the figure below, click on the image, the base64 encoding of the image will be displayed on the right , is it very convenient?

　

　

　Original article with limited writing style and limited knowledge. If there is anything wrong in the article, please let me know.