Take the 2-minute tour ×

I am currently developing a web-app. It contains images which are generated dynamically in the server (and thus takes some time to appear after requested) and then dished out. So I thought that I will use HTML5 local-storage API to cache the images, so that on subsequent requests for the same image, it can be served instantly. For tha, I plan to use base64 encoding of the image as the source instead of using a source URL.

Instead of requesting the image from the server, the JS will now first check whether that image data is currently available in the local storage (say an image with attribute 123 is stored in the local storage with 123 as key, and the base 64 encoding as the value). If yes, then just change the image's source with the value obtained from there. Else request the server to send the encoding, upon receiving which, it is stored in the cache.

Problem is IE6 and IE7 don't support it. There is a workaround, as described here, but that involves a server side CSS file to contain the image data. Since images will be generated on the fly, that won't serve our purpose. How else can I achieve this in IE6 and IE7?

share|improve this question
add comment

2 Answers

Alternatively don't try and cache anything clientside. Cache the generated images on the server side and host those images like normal. You don't need localstorage and cache it client side.

In other words:

  1. generate image server side using your script
  2. cache it somewhere like /httpdocs/cache/images/whatever-hash.jpg
  3. serve the image in your document <img src="/cache/images/whatever-hash.jpg">

If generating an image takes 5 seconds and you have 120 concurrent users requesting 100 unique pages and your server script can only handle processing 4 threads at any given time that comes out to 5 seconds x (120 /4) / 60 = 2.5 minutes of server processing time before the last user in the queue's image is served and the data stored in localstorage.

The same time spent will be true if all users requested the same exact page. There would be no real benefits from caching per user since every user will have to ask the server to generate their own image. Also since localstorage will get invalidated often the more the user does they will feel a considerately slow user experience and in my opinion bail on your app.

Caching the file on the server will have many more benefits IMHO. Sure it takes up server storage space but these days it's rather cheap and you can get a cloud CDN (example www.maxcdn.com) to combat the load.

If you still decide you need to cache client side, because IE6/IE7 doesn't support localstorage or data URI so check out the following

share|improve this answer
I had thought that too, but it isn't feasible. There will be thousands of users. If for each user we ave store a great many number of images on the server, it will become clumsy... –  Cupidvogel Feb 13 '13 at 17:13
What exactly is the image(s)? And how many are we talking about per user? –  Anthony Hatzopoulos Feb 13 '13 at 17:17
The images are, say, as in Google Book Preview, you request a page, say 48, and it is served (if legal, of course!). These images are generated dynamically in the server, since only the book is stored as a mobi or epub file, and based on the client, (if it is an IPad or iPhone, or Kindle) it is served (that is why we can't just save each page as a separate image). And the number of users will be pretty big...:) No of images per user will be say 50 (based on an average estimate of the image sizes, and the 5MB limit of local storage).. –  Cupidvogel Feb 13 '13 at 17:22
I'm inclined to still solve this by storing cached images of the pages on the server. I've edited my answer with my reasons why. –  Anthony Hatzopoulos Feb 13 '13 at 17:45
Okay, will check whether this can be done. That is, whether a CDN such as the one you mentioned can be used. That being said, is it not possible at all to do it client side? –  Cupidvogel Feb 13 '13 at 17:48
show 3 more comments

set the headers to inform the browser that the resource is cached :

header("Last-Modified: " . date("D, d M Y H:i:s", getlastmod()));

in PHP or


in .net

This way the browser will cache the resource.

share|improve this answer
I am not using PHP/Apache, I am using GWT and deploying it in TomCat.. –  Cupidvogel Feb 13 '13 at 18:50
what is your server-side technology, how do you get the images dynamically? –  Roman Hoyenko Feb 13 '13 at 19:22
GWT..Setting headers like that with page-load is a no-no in this app, for a variety of reasons... –  Cupidvogel Feb 13 '13 at 20:01
You can set them just for the images. You can set up a filter for your webserver that will add the Last-Modified to http header. You could also specify the expiration time as well. –  Roman Hoyenko Feb 13 '13 at 20:18
Will try and see if it works... –  Cupidvogel Feb 13 '13 at 20:20
show 1 more comment

Your Answer


