|
Beginner Tip:
Understanding Images Basics
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
How long are you willing to wait for a Web page to load - 30 seconds? 15 seconds? Not long at all if you're like most people. In fact, if your page doesn't load within 8 seconds, you could lose 1/3 of your visitors.
One of a Web designer's most frustrating tasks is to balance attractive graphic design against load time constraints. This job is easier if you understand the different image formats and optimize them for best display.
Common Image Formats
Most Web graphics are presented in three formats: GIF, JPEG, and PNG. The best format for your image depends on how it's designed.
- GIF is an acronym for "Graphics Interchange Format." GIF images are still the most commonly used format on the Web and the only format universally supported by all versions of graphical browsers. GIFs compression method makes them ideally suited to display any images with large areas of flat color - company logos, banner ads, most graphics created specially for Web display. Most clip art images are GIFs.
- JPEG stands for "Joint Photographic Experts Group." It is supported by most browsers 2.0 and up and used to display photographic images. JPEG uses a "lossy" compression method, meaning that some information is actually discarded when you compress a large JPEG image. Fortunately, this isn't as bad as it sounds - you'd be surprised how much a JPEG can be compressed without much visible loss of picture quality. The JPEG format has one big advantage over the GIF format: it can display images having potentially millions of colors, whereas GIFs are limited to 256 colors. For that reason, JPEG is your best choice if your picture is a photograph.
- PNG (Portable Network Graphics) is the newest format and the one least supported by browsers. PNG doesn't support animation (GIF's do) and can't be compressed as much as JPEG. However, it does combine many of the best features of GIF & JPEG and even adds more. PNG supports gamma correction: this feature lets a PNG image display exactly the same across different computer monitors (so if you select a certain color scheme, it will always display correctly). While Netscape and Explorer (4.0 and above) each support some features of PNG images, neither offers full support. Until they do, it's best to stick with GIF & JPEG images.
|
Sneak Previews: Interlaced GIFs and Progressive JPEGs
Browsers normally display GIF and JPEG images one band at a time, from top to bottom. This process can seem excruciatingly slow to Internet users with dial-up connections. They can't see the image until it loads completely.
Interlaced GIF's and progressive JPEGs give your visitors a sneak preview: a very low-resolution version of the image that becomes clearer with each pass the browser makes. This hint of the image keeps the viewer's attention and provides important page clues. For instance, if your graphic is an image map, frequent visitors can immediately identify and click on the link that interests them without waiting for the whole image to download.
Most graphics programs allow you to create interlaced GIF's and progressive JPEGs. Simply create (or edit) your image and select it as an option on the save menu. Photoshop 5.0 has a pop up box that asks you specifically if you want to save your GIF as "normal" or "interlaced." Other packages offer similar options.
Add HEIGHT and WIDTH to <IMG> Tags
Have you ever noticed how the text layout on some Web pages is suddenly rearranged when the images pop up? The Web page designer failed to add two simple arguments to the <IMG> tags: HEIGHT and WIDTH. When you include these size specifications, you prepare the browser to hold a place for this image until it downloads. Without this information, the browser displays text first, then relocates it to accommodate images when they finish loading. While HEIGHT and WIDTH don't speed up your page, the page layout change can confuse your visitors - especially if they had already started reading the text before the images appeared.
The syntax for this is simple:
<IMG SRC="image.gif"
HEIGHT="250" WIDTH="150"
ALT="Descriptive text here">
|
Use HEIGHT and WIDTH with any image name, format, or any size image. Like interlacing, this is a simple way to alert your visitors to expect an image - and give them something to do while they wait. This technique also works well when used with tables.
Optimize Image Size
Now that you have your images interlaced and tagged properly, you need to optimize them. The easiest way is with GIFBot, NetMechanic's free image optimization tool. Use GIFBot to analyze your images and select the compression ratio that best fits your needs.
Here's a sample of what GIFBot can do -
100% Image
Image Size: 2914 bytes |
|
44% Savings
Image Size: 1627 bytes |
|
61% Savings
Image Size: 1124 bytes |
|
Once you've tried these basic concepts, consider some of the more advanced techniques discussed in our June, 2000 Load Time Tip. Graphic images can emphasize your site's message and enhance its content. Make sure that your graphics attract visitors, not drive them away.
|
