The other day one of my clients shot me an email about a site I have not worked on in a while. A highly trafficked private image tracking website that shall remain nameless in this case that needed to not only display large amounts of images at once, but do it quickly.

Page load times were below the 5 second mark but being a scalability engineer at heart, I knew I could get the site under 1 second page loads with a little work. The first step was to put a bullet in the dynamic images. They had moved to using the GD library to render thumbnails a quarter of the size of the larger images. Some of them being larger than 5 mb in size and 3200×2500 + in resolution. Doing this over and over again on a page of 25 thumbnails is quite intensive. Simply caching a static version of the image cut load times of the pages back to the 1.65 second mark.

Next, non of the static images on the site had any type of cache control or expires headers.  This is much easier to do when all of you images are in a certain location:

Version 1 - Filetype Directives > Add this to an .htaccess file and it will only cache the allowed extensions.

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

Version 2 – Cache it all > The method I took in this case was to simply use an .htaccess file in the root images folder containing:

Header set Cache-Control “max-age=2592000″

The result? First page-loads stay in the 1 second range, and cached views load in less than half a second! A great feat when you are getting a million plus hits a day.

What did we learn: static images are your friend, a lot of people like to use the GD lib / imagemagick lib because they are easy and you do not have to worry about file management. But, it takes much longer to render those images every time than to render them once and then copy() them to the server and cache them out. If you need some php post a comment and maybe ill through up some source.

I should also note we obtained the 1.65 second base load by pre-caching images on upload. That way the user never actually has to generate the thumbnail on page view. It’s generated on upload so the user simply caches it as soon as the page comes up.