What does a little froggy have to do with anything? Well, that little froggy up there is one of the smallest amphibians in the world. Biologically, he is pretty closely related to some of the big-ass frogs you see rib-it-ing away on logs and the such. But this little guy is small enough and light enough to dangle off a tiny twig and makes his living eating the itty-bitty little bugs that one would find on said tiny twigs. The big ass frog wouldn't stand a chance.

Ok, you must be getting the point by now. The web, in this metaphor, is the tiny twig and your website is the little froggy. Your website doesn't stand a chance out there if its file sizes are too fat.

Images
Let's start with the most important way to reduce your page's overall load time. Images are very important and you can't design a great website without them. However, there are some ways to get their sizes down and this can make a big difference in the amount of time it takes for a given page to load.

The difference between JPEG compression and GIF compression isn't all that hard to understand. JPEG compression is a lossy compression method. Basically, to save on file size, some of the information is thrown away. At a very low compression percentage - say 80%, the loss of image detail is almost unnoticeable. At a high percentage like 20%, your image looks soft and mushy. This type of compression works best for photographic images or images with a blend or drop shadow.

A GIF's compression method basically takes away color information to save on file size. If you try compressing a photo using GIF compression, the smaller your file size, the less colors the more dithering you will see. Let's use Mr. Froggy as an example.

8 Color GIF 3.87k	JPEG at 45% Compression 3.14k

As you can see, the GIF looks dithered and yucky (dither is BAD) and it's even bigger in file size than the nice, sharp looking 45% JPG.

But JPEG compression isn't always the answer. Choosing a GIF format is always the right choice for flat color objects with no blends or drop shadows. Let's look at the Brina.com logo for an example.

8 Color GIF 745 Bytes	JPEG at 20% Compression 1.71k

As you can see, the 8 color GIF is far superior to the JPEG and its a lot smaller in file size. At 8 colors, the anti-aliasing around the letters is nice and smooth. Anti-aliasing refers to the use of different colors to create what appears to be a softer edge. At 2 colors, blue and white, the edges around the curves would look jagged.

IMPORTANT TIP: Never attempt to reduce the size of an image in GIF format. First, change the mode to RGB and then change the image size.