Adam Trickett

Firstly, I’m not an expert when it comes to image optimisation. I can export files from Fireworks that are pretty small, and I can judge when not to use images where a little bit of CSS would do the trick, but I am by no means somebody who can stand up in front of a group and tell people what they should be doing.

I can tell you what I’ve done with this website and what works for me. When I first designed this site, I tried to do what I thought was the right approach to website imagery:

• I combined all the small little graphic elements into a CSS sprite
• I sliced only what I needed and used repeating images as much as I could
• I selectively used PNG, JPG and GIF, depending on the need (simple colours, alpha transparency)
• I put all the images on img.adamtrickett.com
• I “optimised” all my PNG files using online “squashing” tools

Unfortunately I was in for a rude shock. My efforts were pretty minimal as my sites base appearance used around 450kb worth of images. So what? I thought at first. Todays broadband internet connections surely could handle that, right? Well they can, but not everyone has the luxury of a fast internet connection, and I realised that isn’t the best point of view to take.

I realised I needed to reduce the amount of image data used to view this website. Some of the techniques I used are listed below:

• Replace images for gradient areas with CSS3 gradients – Ok, while support isn’t perfect, it was good enough for me. The gradients I used were of pastel colours so it didn’t matter too much that not every person would see it.
• Replace PNGs with 8-bit PNGS – When I exported my images from Fireworks, I exported them as 32-bit PNGS which are quite heavy in file size. 8-bit PNGS on the other hand, aren’t so heavy.
• Replace some vector art images with SVG – Thanks to Modernizr, I’ve been able to replace some images completely with SVG for new browsers and fallback images for older browsers.

The result of using these techniques means I managed to reduce the amount of image data overhead to about 190kb. A lot less than before. Ok, so maybe theres a million other techniques out there to further reduce the load, but thats all I have time for at the moment. In the future however, I will be converting more images such as the UI sprite and page background to SVG.

Until next time…

Side note: Funnily enough this year I’ve had the pleasure/pain of house-sitting my dad’s house. His house is in the outer suburbs of Perth, Western Australia. A good proportion of the population have access to ADSL2+ (which is pretty damn fast for us, but 3rd world compared to Europe and North America). My dad’s house however can only get ADSL1 (pair gain, 8km from the exchange, Fibre optic to the RIM, and a million other technical reasons why it can’t happen), and even then I barely manage to get 1.3MB/0.2MB. Viewing my own website was painfully slow and prompted me to do all this.