CODEWITHSUNDEEP
htmlinternet-explorer-7base64internet-explorer-6local-storage
NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5153

Using data URI for images in IE 6 and 7

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?

Upvotes: 1

Views: 798

Answers (2)

Roman Goyenko
Roman Goyenko

Reputation: 7070

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

Response.Cache.SetLastModified(DateTime.Now);

in .net

This way the browser will cache the resource.

Upvotes: 1

Anthony Hatzopoulos
Anthony Hatzopoulos

Reputation: 10537

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

Upvotes: 1

Related Questions