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.
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.
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.
|
|
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.
You can find "how to's" for transparent images at:
An interlaced image is easy to spot compared to a non-interlaced image. And for those of you that don't know the difference- Pay close attention because your very EYESIGHT depends on it! Interlacing is a process by which the image is drawn in a series of passes rather than all at the same time. The first pass skips a certain number of lines, then on consecutive passes the lines which were skipped are filled in. This has the effect of producing an image that starts off blurry and then comes into focus as opposed to drawing the image from the top down.
Interlaced images may start out blurry, however there are two very distinctive reasons to use them. First, they give the client something to look at rather than blank space. This has a capturing affect on the clients attention. Second, as the image fades in, the client can decide whether or not they wish to stick around and see the rest of the image or simply move on.
Why not interlace ALL images? Well, as with everything else in life there is always a trade off. Interlacing typically increases the image size, so although they get a preview... they do wait a little longer for the finished image. This is usually acceptable, unless the image is so small that it just doesn't make sense to interlace the image, and surprisingly enough sometimes interlacing actually decreases the file size on very small images.
SO WHAT'S ALL THIS ABOUT MY EYESIGHT?! OK already... computer monitors also come in both interlaced and non-interlaced varieties. Interlaced monitors draw every other line on each consecutive pass creating a slight flickering effect. You may not be able to see it, but it does put more strain on your eyes. If you are unsure whether or not your monitor is interlaced and you have a camcorder, look through the camcorder's eyepiece at the monitor... if you see it flickering its Interlaced! So if you are looking for a new monitor make sure that it specifically says it is NON- Interlaced!
Animated gifs capitalize on the Gif format's ability to contain multiple images. They are created by piecing together separate frames and assigning delay times between the display of the different frames. In this manner, images can appear to be animated, or in a state of change.
Animated gifs are most effective on the World Wide Web when used for small icons and logo's. When animated gifs are used to create large graphics, the file sizes usually become prohibitive from use on the Web. Animation can also be achieved by inserting Java Applets and other plug-in based technologies into a web page, however, animated gifs are typically much smaller and work on more client browsers without the need for plug-in application support.
There are some things to be aware of with the use of animated gifs. First of all, not all browsers support them. Browsers that lack support for this type of gif will simply display one frame of the multiple frames within. This means that the image must be carefully constructed to work with non-supporting browsers as well. Also keep in mind that those non-supporting browsers must still download the entire gif to display it.
Secondly, the use of animated gifs causes many older browsers to constantly flash messages in the status bar. This has become a big complaint for many Web users as the flashing status bar interferes with being able to preview where a hyperlink will lead to.
Finally, if after considering all these factors it's animated gifs your after, check out these resources:
Home, Forums, Reference, Tools, FAQs, Articles, Design, Links
Copyright © 1996 - 2006. 
All rights reserved.
