Data URI vs. Binary in Database

Question

I'm posting an image to the server using the DATA URI (client side, using the canvas). I now have two choices: I can save the "image" as a string in a varchar(max) column or I can convert it to byte[] and save it as varbinary(max).

As far as implementation, the effort is the same. I am trying to determine what would be more efficient as far as 1: space in the DB and 2: displaying the image. Has anyone seen any analysis on this or have a good way to measure this?

AN FYI - a 3kb image is about 100K characters in the DB.

Using: ASP.NET 4.5, MVC, SQL Server 2008

To Clarify

I can either store the image in the database using byte[] in a varbinary(MAX) column like is typically the case or I can store the DATA URI from the HTML5 canvas that looks like data:image/png;base64,iVBORw0K... in a varchar(max) column.

Storing the byte[] is typical and needs no further explanation. Storing the DATA URI is just a string and displaying the image would be a matter of:

<img src="data:image/png;base64,iVBORw0K" /> or
<img src="@Model.Uri" />

My question is which one is more performant and space saving and if there's any documentation, white paper or analysis around this specific comparison.

Answer 1

With no real answer and little information found Binging with Google, I did a simple timed test inserting 20K records (less than that was pointless) and Selecting one record at a time in a loop. I used PetaPoco for DB access. If you find something out there or have some info, please share. I think this will be a more common scenario with DATA URI getting more attention.

URI was consistently faster inserting and selecting. Faster being relative because it's measured in milliseconds. This shouldn't be a factor - it's whatever is easier.

As far as rendering to the client. I used two methods, an ImageResult (custom ActionResult that returns an image) from an MVC action method (this is rendering an image in the http response) and returning the URI string and using it as the image SRC (i.e., src="@Model.Uri"). Again, barely a difference. Results using Chrome dev tools:

ImageResult: 2 requests, 200ms, 3.2KB
DATA URI: 2 requests, 200ms, 3.9KB

However, I did notice that the ImageResult (byte[]) version will automatically get cached by the browser because it's an image for all intents and purposes. The DATA URI version does not cache by the browser automatically.

From this rudimentary testing, byte[] is the way to go because of the automatic caching by the browser and all other results being equal.

My Set Up: i7, 8GB Ram, SSD, SQL Server 2012, IIS Express

Caching benefit was something I noticed with no setup. Yes, I'm sure one could manage the HTTP headers, etag, output caching, etc.