;

draw Image base64 vs url vs blob · jsPerf

Preparation code output

<img id="img" src="https://lh3.googleusercontent.com/-v9Hd_uz3oDA/VGn7n0Ox5gI/AAAAAAAAAD8/RiMsgsj3_1o/w600-h800-no/07f5ffe6ca7eb5d3c2b8d3bc8c.jpg"/>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in Other 0.0.0 / Other 0.0.0
Test Ops/sec

image from url 

// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = image_url;
 pending…

image from base64 jpeg 

// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = base64_jpeg;
 pending…

image from base64 png 

// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = base64_png;
 pending…

image from blob_url 

// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
img.src = blob_url;
 pending…

image from blob 

// async test
var img = new Image();
img.onload = function() {
  deferred.resolve();
}
var urlCreator = window.URL || window.webkitURL;
img.src = urlCreator.createObjectURL(blob);
 pending…