Images are one design element that people feel they simply cannot exclude from their Web sites. For the most part, images do enhance and add to a site when properly utilized, however, when abused they can ruin an otherwise creative and informative site and assure that visitors will not return.
In the interest of providing answers on frequently needed topics, some short descriptions, tutorials and links to information rich sites have been compiled. If you find a good resource that should be added, or if you encounter a broken or changed link, please notify: john@htmlhelp.com.
Available Topics
JPEG -vs- GIF
Transparent Images
Interlacing
Animated Gifs
--------------------------------------------------------------------------------
JPEG -vs- GIF?
This question is quite frequently asked by web designers with all levels of
experience. The really short and sweet rule to remember is:
"Lots of colors, JPEG... Solid colors or no gradations, GIF."
The first thing to understand about GIF and JPEG image formats is that they are both compression based formats. In other words, they take an uncompressed image such as a bitmapped image, and compress them to a smaller file size. The usual result of this conversion is a significantly smaller image size.
It might seem that one compression method would always result in smaller file sizes, but that is simply not the case. The GIF format is excellent at compressing images that have relatively few colors with no gradations. In fact, most small web graphics which are saved in GIF format should never exceed 10 kb. Now in the world of images... that's small! By contrast JPEG compression, when there are few colors and no gradations, usually results in images which are larger than their GIF counterparts and appear noticeably degraded.
As was stated before, each format has it's own particular advantage. And while GIF's may win out with the non-dithering, fewer color images, JPEG is King for dithered continuous tone images. A continuous tone image has a smooth transition or blend from one color to another. A good example of this would be a photograph. Rarely is a picture of anything a single color. There are many color changes, shadows and even gradations of color on objects. All these colors and shades floating around call for the JPEG format.
If you are interested in much greater technical detail check out the JPEG FAQ or visit The Graphics Page. And remember, if you are trying to optimize your site for performance, save each image in both formats and then compare them to determine what is best in your particular case!
An easy way to do that with a Photoshop compatible filter in Windows95 is to get PhotoImpact's Smart Saver which allows you to actually preview images and sizes before making the final decision. This tool is also useful in creating transparent images which are discussed next.
--------------------------------------------------------------------------------
Transparent Images
A transparent image is one whose background allows the page background to
display through so the image appears to have no visible border around it.
This is useful when the background of the page is a different color than the
background of the image. Without transparency, the image will have a border
around it, but when saved with transparency the image will appear to float
right against the page background. Currently the only formats that support
transparency are the GIF and PNG formats.
Example:
Non-transparent
Transparent
One problem with Transparent images is that not all Browsers display them properly. Some older Browsers cannot distinguish the difference between the GIF87 Non-transparent format and the GIF89a Transparent format and will display the original background color. For this reason, graphic artists need to attempt to make the background color of the image the same as the background color of the intended page even if they are saving it in transparent format.