As part of a personal website I am doing, I transition between several large (1920 pixels wide) images. It is beneficial for me to do two things :
- Cache the images so they don’t keep taking up my bandwidth
- Prefetch the images so that a noticeable lag isn’t taking place while the image loads.
Caching is a bit tricky. While I want the names to stay consistant, I also want to be able to change the images at anytime. What I want is the browser to cache kitten.jpg until next year, or until I decide that I want a different kitten image and it should pick the new kitten.jpg (almost) immediately.
I have seen this problem solved in Ruby on Rails. What they did is append some query string identifier as part of the image. So instead of retrieving kitten.jpg, you would retrieve kitten.jpg?mittens. When the image changed, so did the identifier to something like kitten.jpg?bucket. This lets you cache aggressively, while still being able to change the image fairly regularly. (I am aware of other headers such as Last-Modified that might be a better solution. But from my understanding that only works with documents and not images. If an image is cached, the browser will use it until it expires as opposed to doing a HEAD request to see whether the Last-Modified date changed. I could be wrong about this).
I decided to do something similar, in that the md5 of the file will be appended.
The other thing I was missing was prefetching. I understand I could easily do this by hiding a bunch of images in the HTML page, or dynamically creating an Image object and setting the source. But this is 2011 dammit. We have standards that were promised, and behold link prefetching! It turns out only Mozilla and Webkit support this, which is lame. But that’s fine considering this website is only for my use.
I put in a pretch link using this method and used Firebug’s net panel to see whether it was working. And apparently it didn’t. I found out much later on that Firebug doesn’t capture it. You have to look at the server’s access log so see whether the image was retrieved.
Next, I checked out Mozilla link prefetching FAQ, which informed me that URLS with query strings are not prefetched. I found out much later that this is a lie (and removed it). This was actually fixed back in 2003 by someone who also thought it was stupid.
So here I am, also at 01:00. Reheated a plate of pasta and now enjoying some lukewarm soup. I promised myself yesterday I would be in bed by 23:00 at the latest. Tomorrow will be unpleasant, but at least this feels accomplishing.