Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.
Reduce Images to the Minimal Resolution
I always work with png's as they are probably the most compact of the three common browser compatible image types. So the first thing I did after cropping the background was saving as a png. Even with pngs though there is significant room for improvement.
PNG-8 instead of PNG-24
When you save a png with photoshop you can save it in many different web formats. The most common of which are png-8 and png-24. These both save as a png file, but png-8 is a much more compact file as it reduces the image to websafe 256 colors. You can further reduce png-8 to a smaller number of colors. With the background image I was able to reduce it to 64 colours.
A simple and handy tool to use is "PNGCrush". This tool strips unnecessary data (such as author name, date created etc) from pngs reducing them to the bare minimum dataset. This combined the the step above had the effect of reducing the file size for the background image from 4.5 megabytes to 16 kilobytes (or 0.016 megabytes) nice.
Remove Unnecessary Transparency
If you have an image with a gradiated transparency (a drop shadow for example) it will have been saved using png-24 as png-8 sucks at semi-transparency. If you must have the gradiated shadow then thats what you have to stick with, but you should check every image on your site to see what can be reduced. For example On the hunt club site I was able to convert three 1000x470px png's to png-8 with minimal loss of quality. Each one reduced from 1 megabyte to 254k.
Use Image Sprites
Sprites are a technique of combining several smaller images into one large image. You then selectively display a portion of that image for different elements. This has two benefits.
- Reduces Number of Connections: Each time you open a webpage your browser opens a number of connections to download the different resources such as images in parallel(at the same time). However the browser can only handle so many connections at a time. It varies from browser to browser and can be adjusted but the standard number is two connections at once. So even if both the server and the client have enough bandwidth for more connections you are limited to the browsers parallel limits. This means that if you have more resources(images,script files,css files) than the browser has connections then the browser will have to queue up requests for resources. By combining several smaller you can reduce this queueing.
- Reduce Extra Info: Each image file contains extra non visible meta data which is used by operating systems to decode and open the file. By combining images into one you reduces the repetion of this meta data. This has only minimal effect but its useful to know.
There are many useful tutorials on sprites on the web. If I write one myself I will add a link here.
Note: You would only combine images into a sprite if they are guaranteed to always be displayed together. A good use of sprites is a menu with rollover effects.
Specify Image Sizes
This does not have any effect on download speed, but specifying the image dimensions in the img tag reduce the work the browser has to do to workout where to place each element. This results in a smoother page load with less redrawing required on the browsers part.