Return Base64 encoded thumbnails in JSON or just return URLs to them?
image, javascript, json
Solution
It depends.
In favour of embedding:
- No extra requests.
- No extra round-trip (related).
- Small overhead (no URL, no extra request headers)
In favour of linking:
- Smaller total transfer (unless your images are tiny).
- Cacheable.
Basically it depends on the size and reuse of the images. If the images are only likely to be seen once then there is no benefit to the cacheability. If your entire JSON response can be cached that is even better.
If the images are so small that the header overhead is a significant portion of the size of the image it might be worth embedding them.
Lastly protocols such as HTTP2 and SPDY will multiplex all the data on a single connection and reduce much of the overhead (such as headers). So unless your images are truly tiny and unlikely to ever be cached it is probably better to link to them when using these protocols (which you should be using).
Problem
I have built a page showing a number of items with their thumbnail images. The page has a pager and the user can iterate over the results back and forth. Each iteration request is made using AJAX and a JSON response is returned. Currently the JSON response also includes the Base64 encoded thumbnail image for each item. For 12 items the response is about 100KB(gzip encoded). Thumbnails are compressed as JPEG. Is this a good way? Instead of embedding thumbnails in the JSON response, is it preferrable to just include URLs to thumbnail images? Please answer in terms of performance(and maybe bandwidth) both client side and server side.