Question

I am writing a javascript application which fetches data as JSON from a PHP based API. Currently images URLs are received from the API which are then used to display them using the <img> tag.

Is it practical and efficient to use dataURI instead of regular image URLs ?
My application is intended mainly for mobile phones.So will this need additional processing power in the client side ?

Answer 1

Here are four reasons I might avoid Data URIs:

1) There’s an overhead with Data URIs (both processing and bandwidth)

2) Data URIs are not cached

http://en.wikipedia.org/wiki/Data_URI_scheme#Disadvantages

3) Data URIs may leak memory (in Webkit-based browsers – so Chrome/Safari and the “big” smartphones!)

http://waldheinz.de/2010/06/webkit-leaks-data-uris/

Data URI leak in Safari (was: Memory Leak with HTML5 canvas)

4) They might be up to 6x slower!

http://www.mobify.com/blog/data-uris-are-slow-on-mobile/

On the flip side – there’s definitely a place for Data URIs. If the images are fairly static, passing back a Data URI to the client (and then caching that string in say localStorage) could be an elegant solution.