Ways to keep your image file sizes small?

The whole point of having a forum is to get people to return day after day and read many pages on your site: if you're successful, that means a lot of pageviews and bandwidth. In such cases, you really have to keep the graphics well optimized or they will end up killing you in bandwidth fees. I like having colorful, graphical templates though, so to compensate I try to plan images in such a way that they don't take up much room.

For instance, (I know I'm not explaining this well, I'll look for a page that explains the concept better) I know that GIFs are "read" up and down instead of side to side, so vertical stripes end up taking less room than horizontal ones. I also try to plan images so they don't use many gradients or drop shadows, preferring larger blocks of color instead.

What techniques do you use to keep your file sizes small for your forum templates?

 

use CSS instead of multiple different images

cache the images

use .png over gif and jpg

 

I don't agree with this - PNG files are usually bigger because they contain alpha transparency. As a rule of thumb, avoid PNGs unless you really need the transparency.

- Use JPGs for larger pictures/interface elements that need more than 256 colours (but remember to optimise the quality to around 70% or less).
- Use GIFs for smaller interface elements that only have a few colours.

An ideal tool is the 'Save for Web' feature in Photoshop - there you can see which file type will take up more space before you actually save the file.

Hope this helped.

 

We save most of ours as gif where we can and there is this site to check how long it takes to load the images and files telling you the largest ones to optimise:

Pingdom Tools

 

Setting the expires header (via mod_expires or otherwise) is a far more effective solution. However, for jpgs, there are jpg strippers available, and png has TweakPNG, which can allow you to remove unneeded information from those formats.