Designing Graphics

General tips to consider when you are designing images for your web pages

Make sure your graphics are consistent with both the tone and the look and feel of your site.
For creating and manipulating images, get a graphics program, like the excellent shareware Paint Shop Pro, or the more expensive but industrial strength Adobe PhotoShop.
Many sites provide free graphics and elements to use.

Bandwidth Conservation:
All the graphics on a page should ideally come in under 30K-40K. Many users won't wait for much more than that.

Use graphical elements such as illustrations, bullets, dividers, etc. only when they truly add value. And reuse the same components, they will be cached and your next page will load quicker.

Always use HEIGHT=, WIDTH=, and ALT= tags to speed up loading and to make sure your layout stays the same, and if the users has "image loading" turned off.
Making use of the height= and width= elements will let the text information load quicker, showing the text before the image has loaded completely.

Since photos are often bandwidth hogs consider providing a small thumbnail or clipart link to the larger photo on its own page.

Using image maps? Use client-side processing, make the clickable areas clear, avoid wasted space, and provide a text menu for those without "images turned on".
Small buttons in a table may load faster as a navigation device than an image map will.

Use the same palette (range of colors) for all the images on a site. A 'browser-safe' palette of 216 colors will look the same on PCs and Macs.

Backgrounds: Use the smallest tiles possible for your backgrounds.  A highly compressed .jpg of simple background patterns with the right match of text color to assure readability.
Set your background color to a similar color so that those without "images turned on" will still see your text.

Interlaced Gifs. An image which appears at low-res., and slowly becomes more detailed is most likely an interlaced GIF file. Interlacing allows a user to get an idea more quickly of what an image will look like.
Other formats, such as progressive JPEG files, can support this feature but are less common.
Interlacing should be avoided with transparent gifs If when viewing a transparent GIF file, it appears "messed up" check to see if it has been interlaced. Some browsers are known to have problems displaying interlaced transparent GIF files. To prevent this problem, simply use the non-interlaced option when creating transparencies in your GIF images.

Controlling image file size. Large images are bandwidth hogs, There are many people who will not stick around waiting for a large image to load, preferring to move on to a faster loading page. If you don't want to scare off viewers (and who would?) avoid these large files, or use a small thumbnail image and link to allow viewers a choice in whether or not they want to spend the time to download and view the large image file.

Shrinking image files. A scanned image will have a dark region which appears to the naked eye to be "black." However, the actual file contains a thousand graduations between "jet black" and "raven black"  and all those colors have to be saved in the file. This is for all colors in the image not just black. By reducing the "colors" in a image you can actually make it smaller and load faster.

Image formats. Currently, there are two main types of image formats on the web. To use them most effectively, it is important to know the features and limitations of each.

GIF
Limited to 256 different colors, support for features like interlacing, animation, and transparency, good for clipart, text, lineart.

JPEG
Lifelike color, Variable compression, Good for photographs and picture quality images.