what is base64,iVBORw0K… on css? [duplicate]

Answer 1

That's a data-url, which basically means that the data of the image is encoded in base 64 (like how colour codes are base 16, regular numbers are base 10), and then put in an url. You can then use that encoded url instead of having to refer to an url on the internet.

You can try googling for "convert image to base64" or something similar to find base64-image generators.

Data-urls are commonly used for smaller images (otherwise your other files would be huge because of all the data urls). These smaller images will then be loaded without needing to send another HTTP request to get those images, so for smaller images, such as small sprites on your site, using data-urls can be useful to speed up loading.

Answer 2

It's a data URI

http://en.wikipedia.org/wiki/Data_URI_scheme

It's just like an image file but inlined within the css file.

Answer 3

Base64 is a type of encoding that allows you to place any type of data that might have special characters in it (which would cause errors in parsing) into the code as just numbers and letters. http://en.wikipedia.org/wiki/Base64

The sequence, data:image/png;base64, is a key that tells the browser the following string contains an encoded version of an image. Instead of loading the image from a remote URL, it is included right into the CSS page. The browser will decode that string into the image file. http://en.wikipedia.org/wiki/Data_URI_scheme