When you’re working with an image heavy website, its important to do what you can to make sure pages load as fast as possible. For something like a gallery website this is particularly important as images can be the biggest cause of a slow website.

Here’s some rules we followed to get thebirdcagegallery.co.uk loading super fast.

Combine images

Wherever possible, combine commonly used images into a single image sprite. This means that there are less images to load, which means a faster loading website. This trick amongst others is essential for large-scale websites such as Facebook, Google and Amazon to keep the number of requests to their servers down.

We combined the Facebook, Twitter and Birdcage header and footer logo’s into a single image sprite as seen below.

Sprites can be a little tricky to use when you’re dealing with links, or other elements which are wider than the image you’d like to use. The background image css property can’t be configured to only show a certain part of the image. To do this, we use :before or :after css selectors on the element we’d like to use the image, like so.

.facebook-link:before {
  content: ‘’;
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(../img/assets.png);
}

Get google to host your javascript

Its common for sites to include a copy of whatever javascript library they use on their server, while this seems like common sense to do so (keeping all the files together), it’s much better to have your libraries hosted elsewhere.

The Google Libraries API hosts a number of widely-used javascript libraries including jQuery, MooTools, Prototype and Dojo. Many websites link to these libraries which means that not only do you save a request to your servers, frequently users will already have the same library in their browser cache from another website, so they won’t have to download it at all.

Optimise images

For some reason this has gained much less attention amongst blog articles than css and javascript compression, in my opinion it is one of the best methods of speeding up page load times.

All the images within Birdcage Gallery were passed through Yahoo!’s excellent Smush.it service. Simply put, smush.it removes the unnecessary bytes from images without degrading their overall quality. You can make big savings by doing this, optimising our images saved us 4mb of space, that’s about 45% of our overall image sizes reduced.

Leverage browser caching

By modifying our sites .htaccess we can tell a browser how long to cache a resource (javascript, css, html, image, video, etc). The browser won’t try to request that item again until the set time peroid has passed.

This is very useful for content that isn’t going to change very often. In our case, once an artists image has been uploaded, it’s not likely to change. For this reason we set our images to expire after 6 months, we also set this time frame for web fonts.

Here’s a sample from our .htaccess document;

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/gif                 "access plus 6 months"
  ExpiresByType image/png                 "access plus 6 months"
  ExpiresByType image/jpg                 "access plus 6 months"
  ExpiresByType image/jpeg                "access plus 6 months"
</IfModule>

Reap the rewards

Before applying these methods, the average load time for the Birdcage Gallery was 2 seconds, we’re now down to 1.3, nearly a whole second shaved off. It may seem like just a little time, but in reality, split seconds can be the difference between someone staying or abandoning your website. If you’re selling goods on a website, time is literally money.