0

I am very new learner. I am learning php, mysql and css. I am reading many source code to understand how the real programer work. On a site i saw a source code where some one wrote the following line on the css..

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;

Now i am not understanding what is base64 and what is the rest of non readable code? You can find the whole source code of style.css here http://blogaddition.com/2013/01/database-driven-multi-level-horizontal-css-menu-with-php-and-mysql/

please help me to learn and understand.

Sahriar rahman supto
  • 778
  • 1
  • 7
  • 15
  • 2
    Google base64 encoded images – j08691 Feb 25 '14 at 17:16
  • Why are you guys downvoting so much? – Romain Braun Feb 25 '14 at 17:17
  • 3
    @RomainBraun - Hover your mouse over the downvote arrow. See how it says that it doesn't show any research effort? That's why. – j08691 Feb 25 '14 at 17:18
  • @j08691 Yeah well I don't really agree, maybe he was trying to have a little bit more information about it than what you can find on wikipedia. I like to think this question will pop out in google next time someone wonders about base64, and that someone may bring an interesting enough answer. – Romain Braun Feb 25 '14 at 17:24
  • 1
    @RomainBraun as opposed to all the other questions on SO about base64 encoding? http://stackoverflow.com/search?q=%5Bcss%5D+base64 – cimmanon Feb 25 '14 at 17:39

3 Answers3

2

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

Don Rhummy
  • 24,730
  • 42
  • 175
  • 330
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.

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
1

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.

mpm
  • 20,148
  • 7
  • 50
  • 55