Summarize the pros and cons of CSS inline images

Will there be such a feeling? It technology development knowledge is very broad and very deep, there will always be you do not understand the problem arises. One after another a new question, one after another a new challenge.

Today, interpreting "inline pictures", what are inline images, and what are the pros and cons of using inline images? This is the question I interviewed a new startup company asked, and he said that the problem contains a lot of engineers basic knowledge of the problem, after reading, you have a weak foundation ... Constantly interview, constantly re-examine themselves, and constantly fall to climb up. I think this is the meaning of growth.

　　What is an inline picture?

In the past we loaded the picture, would say so: or Background-img:url in CSS (".. /a.png "),

So the inline picture is so written

data-contract name to get data

Image/png-Data type name

Base64-Encoding method of data

IUANR.-encoded data

: , ; -delimited symbol specified by the data URI scheme

　　Why should I use an inline picture? Advantages of using inline pictures.

Reduce the HTTP request, has reached the optimization of client loading speed, this is what we have been doing today. Bingo! The use of inline pictures is nothing more than the product of optimization work!

As for the merits.

1. Reduce the number of HTTP requests

2, as the background tile class pictures using inline images, reduce the number of HTTP requests, and does not affect the loading speed

　　Disadvantages of using inline pictures

　　1. Browser does not cache inline picture resources

2, the compatibility is poor, only supports IE8 above browser

3, more than 1000kb pictures, base64 encoding will increase the size of the picture, resulting in a slow overall download speed of the page

　　

Summarize the pros and cons of CSS inline images