Converting image in base64 data url reduces the count of HTTP request and will increase the performance of the website because the load time to transfer data over the internet is too long and it will save the server request time.

There are many advantage and disadvantage of using Base64 dataurl below:

Advantage:

1. It will remove the separate HTTP request by wrapping up the url inside the CSS and HTML code.
2. It can also be saved inside the DB so that if we lost the file or if file is corrupted or destroyed by any source we can have the image back.

Disadvantage:

1. You should notice that even if it increase the performance of the website, it also increase the image size to about 15-20% of the actual one.
2. It doesn't have a support on IE browsers like IE6 & IE7. 

Here is the code to convert Image to Base64 dataurl:

HTML:

<div>
	<p>Select a File to Load:</p>
	<input id="inputImageToLoad" type="file" onchange="loadImageFile();" />
	 

	<p>File Contents as DataURL:</p>
	<textarea id="imageContents" style="width:640;height:240" ></textarea>
	<img id="imgUpload" src="" alt="uploaded photo">
</div>
<span class="upload-path"></span>

Script:

function loadImageFile() {
    var filesSelected = document.getElementById("inputImageToLoad").files;
    var fileName = document.getElementById("inputImageToLoad").files[0].name;
    var fileExt = fileName.split(".")[1];
    console.log(fileExt);
    if(fileExt == "png" || fileExt == "jpg" || fileExt == "jpeg" || fileExt == "gif") {
        if (filesSelected.length > 0) {
            var fileToLoad = filesSelected[0];
     
            var fileReader = new FileReader();
     
            fileReader.onload = function(fileLoadedEvent) 
            {
                var imageContents = document.getElementById
                (
                    "imageContents"
                );
         
                imageContents.innerHTML = fileLoadedEvent.target.result;
                document.getElementById("imgUpload").src=fileLoadedEvent.target.result;
            };
            fileReader.readAsDataURL(fileToLoad);
        }
    } else {
        alert("Please select a valid image");
        document.getElementById("imgUpload").src = "";
        document.getElementById("imageContents").text = "";
    }
    
}

This way you can get the dataurl of the respective images. The images that can be used to generate dataurl are ".png, .jpg, .jpeg, .gif".

You can also download the attached demo.