Something that many people forget is that the best way to optimise your images is to not use them at all. So, you should always be looking for ways to lessen your graphics-usage,and to get more out of every one that you simply must use. Look at any webpage, and you will see that most of its load time comes from images.

An Ode to minimalism
Look at this page. It is very minimalist in design, using only about 5 images, and 2 of them are single-pixel GIFs. This is because I am not trying to wow you with my HTML skills (you already know I'm great), but I'm trying to provide a fast-loading, functional, but still nice looking site.

Much can be achieved by using very little. Using this page as an example, a tiled background, which doesn't look overly-tiled fills the whole screen. Table cells are given a background colour which breaks the page into visible sections — top, NAV, right, and bottom. Everything has a distinct purpose: the horizontal blue lines are there because coloured <HR>s are not supported by Netscape. The 'Go' button is there because I hate the default grey buttons. And, the frosting effect behind the writing is there so that I can preserve a strong background without making the text illegible.

Minimalist design is a definite trend in the high-traffic sites, » Yahoo is the only example I need to give.

Which Format?
One of the more common mistakes which lead to bloaty images sizes is people using the wrong file format for the job. The simple rule to follow is this:
GIFs should be used for the bulk of your images. Simple line drawings, shapes, nothing too complex. You won't lose any detail because GIFs are 'loss-less', but you can drop the palette down, and maybe up the dithering to cut a GIF down to size.
JPEGs should be used for photographs and blurry background tiles where little of the intended look will be lost by the JPEG's compression. If a graphic needs to be accurate or sharp, stay well away from JPEGs. Just remember, most people would rather have a slightly bigger download than a messy graphic, so try not to sacrafice too much quality. Sometimes a nice effect can be had from compressing an image as a JPEG — mess around and see what you can get.
The best way to choose the format for a graphic is to experiment and save it as both, then compare both their sizes and image quality To see what special things the different graphics formats can do, read our image formats profile.

Chop and Replace
Parts of your site can be dumped without much trouble. Fancy animations that add nothing to the page and only serve to distract; graphical links to other sites (replace with text links); and big headings for a page can be lost in favour of large text headings with an appropriate FONT FACE and COLOR.
Now we come to one of the worst crimes in images: GIF text. This is when you use a special font and put it in an image, because the reader may not have that font and so wouldn't see the words as you intended. This is bad. Never put text in GIFs (or do it as little as possible). It is needless excess. Very rarely does it benefit a page to have a certain font in place, usually a fancy font can be replaced by a more common font and it will look just as good. If you need text over an image, set the graphic as a TABLE BACKGROUND, then put the text in the table.

The slowest images are the ones that aren't there. When you call for an image in your HTML, but the image isn't at the specified location, the browser does a few checks to make sure. This slows a page load down a lot, as all the browsers power is transferred to this search. Only once it has confirmed the file is missing can the browser continue the loading of the page. Don't let this happen. Not only is it slow, but a user loses a lot of trust in a site that lets this happen. Get a link checker and make regular passes over your site.

^ Navigation ^

Palette size
Often, a small sacrifice can lead to big gains. Drop back the colours used, bump the dithering up a bit to make up for the missing colours and you can cut the file size in half with little noticeable effect on the image quality.
Using the web-safe palette is often the easiest route to small file sizes. Because with that palette, you can export an image in Paint Shop Pro stripped down to just 2 colours, where other groups only allow you to go as low as 17 for instance (for Optimised Octree). If you have no idea what I'm talking about, go to our Software Review page and get yourself a copy of Paintshop Pro.

Making your own images instead of ripping other people's is a good idea too, because you can design them to be faster. Also, always have the images you're using with the rest of your files. Don't link to other people's images, because this is slower than using your own (the browser has to go off looking, plus the other person's server might be slow).

Crop out the rubbish
Use the crop tool in your image editor to cut out everything but the essential parts of the image. As a bonus, these essential parts of the images take up less space on your page, and your readers will be thankful that they didn't have to see any rubbish. If the image is still too big, why not resize it a bit and make it smaller?

Stating the HEIGHT and WIDTH
You should always, always include both the HEIGHT and WIDTH tags in your graphics. It means the browser knows what size the image is going to be, so it can continue on loading the rest of the page without having to worry about the graphic suddenly loading and pushing everything else around. It also means that if a reader is in the middle of reading something, the text won't suddenly shift down when a graphic above begins loading, as the browser will have given it all the space it needs.
Another bonus is that anyone with images switched off will still get the same layout as people who have them on, avoiding the possibility of the page looking messed up without images.
Oh, and never use these attributes to make an image appear smaller. Your readers will be downloading massive pictures when they only need small ones. That's just crazy...

Using the Cache
A browser's Cache is an area on the hard drive (a part of the RAM in Netscape) where it stores recently used images. If you go to a new page and your browser sees the same image file being called on, it can just pop it back up from the Cache, skipping the download process altogether. This means super-quick loading for many of your common images. This is why using the same images site-wide is great for speed — they download once and you can use them a hundred times without having to do it again.

One thing to remember: when you optimise an image, and cut down its file size, you might think the difference in download speed will be negligible and you shouldn't bother. But then think about this: if you cut 40% off the file size of every image you optimise, you have cut almost 40% off the combined size of your entire page for every reader. That's a lot of extra speed. With the other tricks available in this optimisation section, your whole site will be much faster. Keep the faith.

The Test
Say I asked you to put a picture of the French flag on your page. I would probably get one of these three responses, which one are you?

The amateur
The Internet's equivalent of the 'boy racer', this guy hopes to impress his mates by sticking as many spangles on his page as possible. If you get the chance, please inform him that "it doesn't work that way, little boy".
File size: 15.5kb

The skilled
Nice and simple. A GIF with some anti-aliasing, 100 by 60 pixels and using a palette of 20 or so, with dithering set to full to make up.
File size: 0.75kb

The master
This is the same graphic, cut down to the bare minimum. In fact, it's only 3 pixels by 1 pixel. The rest was done using HEIGHT and WIDTH tags. It uses only 3 colours, all of them web-safe.
Yes, it doesn't look quite as nice as the flag above, but when you're going for all-out speed, as I explained above, a small sacrifice must be made. Look: [ ]
File size: 0.08kb

Disclaimer: Now, in case you think I like France or something, think again. I don't like it very much at all! I offered this example because I was faced with this situation early on in my designing days, and as my proficiency with my image program and my control of HTML grew, I moved through these stages. Except: I was never an amateur.
Also note that because I didn't want my site to slow down too much, these are pretty well optimised anyway.

^ Navigation ^

Hot Tip
Don't do this! Say you have a line of link buttons. They are all the same apart from the text on them.

< HomePage | Full Index | Section Index >