Is DataURI instead of images practical for APIs and webservices?

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 ?

score 3 · Accepted Answer · edited May 23 '17 at 11:56

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.

score 1 · Answer 2 · answered Aug 21 '12 at 06:35

Unless the images are vitally important I would use just rehular URLs.

Using data URLs will make the original response much bigger so it takes longer to display any data to the user. The images are base64 encoded so the total number of bytes on the wire will also be larger in most cases.

Is DataURI instead of images practical for APIs and webservices?

2 Answers2