+ 30

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

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

15th Oct 2017, 9:55 AM
Adi Pratama
Adi Pratama - avatar
6 Antworten
+ 3
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
15th Oct 2017, 10:19 AM
Schindlabua
Schindlabua - avatar
+ 4
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
15th Oct 2017, 11:50 AM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 4
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.
15th Oct 2017, 12:09 PM
Calviղ
Calviղ - avatar
+ 3
Explicity please Adi
15th Oct 2017, 9:40 AM
👑 Prometheus 🇸🇬
👑 Prometheus 🇸🇬 - avatar
+ 3
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!
15th Oct 2017, 9:59 AM
Schindlabua
Schindlabua - avatar
+ 3
ady. you generate cool content in SL. thank you
15th Oct 2017, 6:35 PM
Kustaa