When and Why we need to use base64 inside background:url() function?

Question

Image of Sample case:
https://s1.postimg.org/8oz8cfg5a7/Screenshot_10.png

Answer 1

If you look closely, you can see that the data url in your screenshot starts with "data:image/png;base64", followed by all the data encoded in base64. So base64 by itself is not a data url, you also need to say what your data is (in this case a png).

> What's the difference between a file and data?
A file is something on your hard drive that contains data. But imagine for example, drawing something on a HTML canvas - it doesn't exist as a file anywhere but you clearly see it on the screen, so it must exist as data somewhere in memory!

> advantage of data-urls?
In this case there are two nice things:
- CORS issues would have not allowed me to take an image from say imgur.com and turn it into a canvas (it's a browser safety type thing)
- I don't need to worry about finding a file hoster, the sololearn code box is good enough :)

You know these days you can make music in the browser and images and video, and data-urls are a bit like the web's equivalent of files. You can google "file to data url converter" to play around with it a bit

Answer 2

Blehhhhh all taken by @Schindlabua :(
But anyway I'll share my file to data url converter
https://drive.google.com/uc?export=view&id=0BwUY4Agtqk0YQm9RaXlocUQzbUE
Warning:
Certainly don't use through Sololearn app

Answer 3

There are not much benefit to use base64 data image, except if the website contains many small images, it could save the the time to load many Http requests, however a sprite image is also another option to make website load all small images at once.

Answer 4

Explicity please Adi

Answer 5

They're called "data urls" and its a way to use images or audio or whatever if you don't have a file, but just the data.
For example, maybe you drew some stuff on a canvas and now you want to set it as a background or trigger a download.

Here I used a data url to make the einstein image available to my code without needing to upload it somewhere (scroll down):
https://code.sololearn.com/WFJ9b4yExk1V/?ref=app

EDIT: also check out "object urls", they are similar!

Answer 6

ady. you generate cool content in SL. thank you