How to Cache Images with HTML5

March 5th, 2012 Leave a comment
Like the article?
How to Cache Images with HTML5

Everyone who has a web page has often worked to make the page load faster. However, if your page is graphic intensive, you sometimes have a problem getting all of the elements to speed up. With HTML5 we have a new solution to this problem called local storage which will allow us to cache images and increase site loading speeds.

Web developers have been using lazy-load techniques for years; creating scripts that would delay or load certain elements on demand. Usually the purpose for this technique is to increase the overall user experience on the site by prioritizing the load of the essential elements on the page and leaving the non-essential to come in while the user is already browsing. With the HTML5 localStorage API we can intelligently select which elements we wish to load and keep a copy on the client machine, reducing the amount of time the page will load in on subsequent visits.

The HTML5 local storage is a client-side database that stores string objects in key-value pairs. Since this is not suitable for binary image data, you would need to first encode your images into a base64 ascii string. There are several uploaders across the web that will allow you to upload a file and get the encoded string. Once you have each image encoded, you can setup your JavaScript to work with the local storage API and create the process that will read and write your images from the local client storage.

//set up a variable to hold the encoded string
var imgString;

//check if the image is already in storage
if (localStorage.getItem('myImage')) {
	//get the string
	imgString = localStorage.getItem('myImage');
} else {
	//place the encoded string value into the variable for storage
	imgString = '[encoded string here]';
	localStorage.setItem('myImage', imgString);
}

//set the src for the image
document.getElementById("somePicture").src='data:image/jpg:base64,' + imgString;

This bit of JavaScript is essentially the process that you would need to take for each image, checking to see if the image is already in storage and then storing it using the base64 encoded string. This will then cache these images in the local storage database for easy retrieval by the client browser and ultimately faster page loading.

For each image you would then leave the src attribute empty so it can be set by that last bit of code to the encoded string:

<img id="somePicture" src="" alt="This is a picture"/>

The use of the HTML5 client-side storage is much more efficient than the browser’s caching system. Using this process you can cache image file types, Adobe Flash swf files, JS files or any other large piece of data or multimedia.

One of the best reasons to use the HTML5 local storage is to reduce the connection load on your server and other resources, effectively putting the work onto the client. With this technique you will see a significant drop in server resources due to the reduction in image file requests for repeat users since the responsibility for serving those images is now on the client.

Obviously, if the browser has already cached the item, the difference between the performance of the image in the cache versus the localStorage will be hardly noticeable. The key difference between the browser’s cache and the localStorage is the level of control you have over the cache. You can set the HTTP server-side headers to instruct the browser to cache the requested item but ultimately the cache policy on the client remains with the client. You cannot control that. With the HTML5 localStorage, you can control what is happening with these artifacts that you have in storage.

Couple this technique with the offline file manifest in HTML5 and you could certainly create a fast and offline-capable site with very little effort.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
If you liked this article, consider enrolling in one of these related courses:
Don't miss another post! Receive updates via email!

Comment