Whats the best way of caching images on my website ?

Question

I have a website

www.somesite1.com which gets all its image content from www.somesite2.com

At the moment each time an image is to be displayed we simply use an absolute URL to get it like this

<img src="http://www.somesite2.com/images/myimage.jpg" />

So each time a user goes to www.somesite1.com for content www.somesite2.com gets hammered.

I'm looking for clever ways of caching images, perhaps using http headers or such like. Thanks

Answer 1

Keep a separate webserver only for the images, since images are a separate http requests.

Answer 2

The simplest answer is to set an HTTP Expires header with a far future value (say 10 years). This way (in theory) the browser should never request that image again taking huge load off your server if you have a lot of repeat visits. Of course, you'll need to come up with a mechanism for changing the image url when the you want to update the image. Most people approach this by adding a build number into the path somewhere (or by appending a build number to a query string).

There's some good information on performance (including use of the Expires header) here:

http://developer.yahoo.com/performance/rules.html

I personally wouldn't worry about caching these on the server side (I presume they aren't being generated dynamically). They are being served directly from disc so the overhead should be small anyway. Make sure you have a separate machine for serving static content and use a very lightweight web server, such as Lighttpd or nginx which should help increase throughput.

http://www.lighttpd.net/

http://nginx.net/

Answer 3

This article on image spriting is very useful.

Answer 4

There is nothing wrong with your setup, it works perfectly. To understand what you need to do to make it work better, you must understand how the browser works.

First, it will read the HTML document from www.somesite1.com. Then it will read it, looking for any URLs. When it finds any, it will start to download them.

So from a browser point of view, there is no relation between site 1 and 2. If you want to improve caching for site 2, you can completely ignore site 1.

This means that you must tell the web server on site 2 to send the correct cache information to the browser. For example, have it respond to HEAD requests and/or set the lifetime of the image to some large value in the header field Cache-Control.

Answer 5

Unless your website is very popular you probably don't need a second server for static content.

If you are using Apache HTTP then you could install mod_cache. You could also look at installing Squid Cache.

I agree with Andy Hume though, if you do require a second server then keep it light and use something like lighttpd and Squid.