“data:image/png;base64,b64Encoderpngstring” VS url-to-folder when set html img's src

Question

I use pywebkit and html5 to develope desktop map server .

Map tiles store in sqlite database .

So when I set html img's src, I have two options.

1. One is read image from database and b64encode it, then set img's src with " data:image/png;base64,b64Encoder-string ".

2. Another is read image from database and save it on disk , then set img's src with url to local folder .

My question is which way is better .

I am most concerned about rendering speed. Which one is faster for the browser to render images.

Answer 1

<img src="http://mysite.com/images/myimage.jpg" /> this is actually a http URI scheme, while <img src="data:image/png;base64,efT....." /> is a data URI , this way image is inlined in the HTML and there is no extra HTTP request however embedded images can't be cached between different page loads in most cases, so the solution actually goes through your way...what is better for you and convenient to overlook what Ian suggested :)

Now move to the browser compatibility -

Data URI's don't work in IE 5-7, but are supported in IE 8. Source

Page Size :

base64 encoding increases page size as well, another thing to look at.

Answer 2

It largely depends on how the application is going to run, and other details such as running environment.

Saving the image to disk has the advantage that you can avoid re-encoding the image every time you need it (which can be avoided by adding a column in you DB with that computed base-64 string).

Summary: 1-Use the first option but cache it the database or a server variable. 2-Use the second option and cache the file names.

But then there is the question of how fast is your secondary storage. You might want to avoid using the HD, even with caching, because it's slow for example or you have limited binary storage (and have more DB storage).

I'd suggest you add specifics regarding what you are worried about.