Question

For small size image what’s (if any) the benefit in loading time using base64 encoded image in a javascript file (or in a plain HTML file)?

$(document).ready(function(){
    var imgsrc = "../images/icon.png";
    var img64  = "P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB";

    $('img.icon').attr('src', imgsrc); // Type 1
    $('img.icon').attr('src', 'data:image/png;base64,' + img64); // Type 2 base64
});

Answer 1

The benefit is that you have to make one less HTTP request, since the image is “included” in a file you have made a request for anyway. Quantifying that depends on a whole lot of parameters such as caching, image size, network speed, and latency, so the only way is to measure (and the actual measurement would certainly not apply to everyone everywhere).

I should mention that another common approach to minimizing the number of HTTP requests is by using CSS sprites to put many images into one file. This would arguably be an even more efficient approach, since it also results in less bytes being transferred over (base64 bloats the byte size by a factor of about 1.33).

Of course, you do end up paying a price for this: decreased convenience of modifying your graphics assets.