I'm told to think about caching of images that will be displayed on the page. The images will be repeated throughout the website on different pages and I'm told to figure out the best way to cache these images. There could be few to dozen of images on single page.

Here's few questions:

  • Will browser caching work to display the same images across different web pages?
  • Should I rather store images in stringified form in a memory instead, using JavaScript arrays?
  • Store them on hard drive using 'localStorage'?
  • What would be easiest yet best option for this?
  • Are there any other alternatives?
  • How to force cache?

Any other information would be greatly appreciated...


Images are cached by the browser in both an in-memory cache (that lasts no longer than the duration of a browser session) and a disk-based cache (that can last across sessions according to the disk cache settings - size and duration) as long as the server doesn't explicitly prevent the images from being cached based on settings in the http headers.

A given image is cached once, no matter what page it is used on and, as long as the URL is the same everywhere, the same cached copy will be used on all pages that specify that image until the image ages out of the cache or the cache is cleared or the browser decides that the cached copy may be stale.

There should be little reason to re-invent image caching by doing your own.

If you have lots of small images in your page, then a common speed improvement is to combine multiple images into a sprite and display each one as a different portion of the sprite.

|improve this answer|||||
  • Good answer. There's also caching at network boundaries, e.g. Corporate firewall or ISP caching router. – JBRWilkinson May 30 '14 at 7:12

Most modern browsers are smart enough to cache images, atleast throughout a browser session. Here are a few ways you could use to optimize performance of repetitive images in your website.

  • You can tell the browser to cache the images for a long time by providing the appropriate HTTP header information, especially the Expires and Cache-control: max-age. Google developers has a nice best practices documentation for the same.
  • You can use Data URIs instead of actual image files. This reduces the extra HTTP request network overhead since the image data is actually part of the HTML page. You can use localStorage to save these Data URIs across browser sessions.
  • If you have many small images, you should consider using images with CSS sprites.
|improve this answer|||||

Not the answer you're looking for?Browse other questions tagged or ask your own question.