Web users hate pages that take too long to load. In the beginning of the Web, fancy graphics and online applets were cool. But now, if these graphics cause the page to take too long to load, they become obstacles in your path of visitors trying to view your information. Now, every second counts on the Internet.

Recommendations on the Size of Graphic Files:

60K maximum file size to display a full photograph by itself.
15K max for a smaller photograph or image displayed on a page with other items.
4K max for each miscellaneous item like buttons, bullets, logos and rules.
Page Total: 60K max for all images on a page.

These are suggested maximums, if you can keep them smaller, then you're better off.

You may not be able to compress some photos down to the 15K size without greatly degrading the quality.

These numbers are targets to shoot for, so do the best you can.

Ways to Reduce Your Image File Sizes

If you have images with large file sizes, here's some ways you can reduce the size:

For Photographs, reduce the overall size (dimensions) of the image to decrease the number of pixels. If you have an image that is 300x 400 pixels, it will have 120,000 pixels total. By cutting the dimensions down by just one third to 200 x 267 pixels, you will now have a total of 53,400 pixels. That's less that half the original number of pixels.
For Illustrations, if you are using a lot of colors, reduce the number of colors. If you are using 6 different colors, use just 3 or 4 instead. This will help you achieve better compression.
For Buttons, and Simple GIF images, reduce the amount of detail. If you are using textured buttons or GIFs that have a lot of color transitions, this may look nice, but if you will use solid colors instead, they will download more quickly.
Use an Optimized or Adaptive color palette for your GIF images. See Color Palettes for more information.
For GIF Images, use a 2 or 4-bit color palette if you can, instead of an 8-bit palette. See Color Palettes for more information.
For Photographs, increase the level of compression. When you save a JPG file, you will have a compression slider that lets you choose how much compression to use. Do some experimentation. The more compression you have, the more image quality you will loose. Find a happy medium. Different photos will be able to take more compression that others without loosing too much quality.
Drop Shadows increase your file size. The effect looks nice, but it is also harder to compress. Using a solid drop shadow instead of a soft-edged one will compress much easier.
Anti-aliasing is another effect that will increase your file size, but it also helps the look of the graphic. You'll have to play with this one because using anti-aliasing when you compress a graphic helps retain the quality of the graphic the more you compress it. But using anti-aliasing requires more file space.

I have found that I can compress a file to a smaller size and retain better image quality when using anti-aliasing, than when I don't use it. So overall, anti-aliasing helps me achieve a smaller file size. Your results may vary depending on the type of compression algorithm that is used by your graphics program. The true "test of the pudding" is to compress a file using both ways and then compare your results.

The Web is a graphical environment. That's one of the big reasons it has become so popular, the Graphics.

You don't want to eliminate graphics and pictures altogether, you just want to make them display efficiently. Attractive images on a Web page will greatly enhance a readers enjoyment and make your pages more interesting. Plain text by itself is boring and can be difficult to read. You want your pages to be easy to read and interesting so visitors will want to come back.

Ways to Make Your Pages Load Faster:

Be cautious about using Moving Images and Streaming Video, they will greatly increase your page download time.
Use text instead of graphics whenever possible.
Reuse the same images whenever possible.
Don't use more than 2 graphics on your home page. Keep them central to the theme of your site.
For photographs, try to keep them less than 200 pixels horizontally and vertically to keep the file size smaller and reduce download time.
Try to keep your home page under 20 Kbytes. Less would be better. 10 would be great.
Don't use more than 800 words of text on your home page.
Don't be afraid to use "white space" or blank areas on your page, it can help frame images and content.

In the next section on Web Graphics File Types, I'll talk about the difference between Bit Map and Vector Images, the typical Graphic File types used on the Web, and give you some recommendations on Good Graphic Design Programs.