However, one reader asked if it was possible to enable a client-side cache of a dynamically resized image. It surely is, and it’s very simple.

Dynamic Image Resizing: Revisited

If you’ve got no clue how to resize an image in PHP, then you ought to go back and re-read the original article. For the rest of you, here’s a quick refresher on what happens.

Our script takes a filename as a $_GET parameter. If the file exists, the script loads it in as an image resource. Using the GD library, we create a new image resource that is the proper size.

Finally, we use a content-type header to tell the browser to interpret the data as an image and we output the image data. Like this…

header("content-type: image/png");
imagepng($dst_img);

Enabling a Client Side Cache

In order to enable a client-side cache, all we need to do is add an extra header to the mix.

There is a set of headers in HTTP to handle this sort of need – Cache-Control. You can use this to enable caching, disable caching, and set some restrictions on what can be cached for how long.

The option we’re most interested in is max-age=[seconds]. This response header is sent along with the data to tell the browser that it can re-use a cached copy as long as it is no older than the specified age.

To enable this with PHP, add another header() call before the imagepng() call, and set a Cache-Control header with an appropriate max-age. Like so…

header("Cache-Control: max-age=3600");
header("content-type: image/png");
imagepng($dst_img);

Keep Request Queries Consistent

With this system, you could set a pretty long max-age for the cache. Assuming that the original image never changes, the user could cache a resized copy for months and your script would be happy.

However, you need to keep your query strings consistent for this to work. Since your request includes a query string, that full string is included in the location that is cached.

According to your browser, it’s not the image that is cached, it’s the location…

http://www.earn-web-cash.com/scripts/resize-image.php?image=http://www.earn-web-cash.com/wp-content/uploads/2008/01/dzone-screenshot.png

If you were to change the query string in any way – leaving out the www, for example – the browser will think it is fetching a new resource and it won’t consult the cache.

This is especially important if you include size parameters in the query string to dynamically choose the new size. You would need to be careful to keep the parameters in the same order every time for the cache to work properly.