|
|
|
Appearance Tips
There are many strategic methods and some plain old tricks to make your graphics look better.
-
Anti-Alias your images for smoother edges.
Anti-aliasing is the technique used to eliminate the "staircase" effect resulting from dissimilar, adjacent, and contrasting colors. It is especially apparent in text and lines. The Anti-Aliasing operation blends the adjacent colors into a gradient that makes the edge look smoother. It is most often used with GIF images, although it does add to the number of colors of your palette. When your palette is reduced to 256 colors, you may suffer some image degradation due to the use of more colors.
Anti-aliasing and GIF transparency may cause you some problems, however. Since a pixel in a GIF is either transparent or not transparent, the anti-aliasing can produce either an image that is not fully anti-aliased or one that has a "halo" around it.
|
|
White
Background |
Red
Background |
As you can see, the image looks good on the white background, but has a "halo" around it on the red background. You can trick the image by making the background of the image the same basic color (if you have a pattern, it can be an average of the colors in your pattern) as your background. See the results below.
|
|
Red
Background |
White
Background |
As you can see, the image now looks great on a red background, but has a red "halo" on the white background. The red "halo" blends into the red background, making the transparency look real.
-
Removing the border from your images.
|
|
| With |
Without |
Specify in your <IMG> tag the attribute BORDER=0. Note that this is generally a must for buttons, bars, and bullets unless you have a specific purpose in having the border.
Example: <IMG BORDER=0 ALT="Susquehanna River" TITLE="Susquehanna River" WIDTH=72 HEIGHT=50 SRC="images/examples/base.gif">
-
Adding pop-up descriptions and providing for browsers that do not load graphics.
|
|
Pop-Up
Description |
Image Did
Not Load |
Always include the ALT="" attribute in your <IMG> tag. If an image does not load, or the viewer has images turned off, the description will show in place of the image. Note that in the case where the image does not load, the description may not appear if the image area is too small to accommodate it.
The pop-up descriptions were introduced in Netscape Navigator and Microsoft Internet Explorer version 4. Some browsers use the ALT attribute for this, while others (correctly) use the TITLE attribute. So, if pop-up descriptions are important, both should be used.
Example: <IMG TITLE="Susquehanna River" ALT="Susquehanna River" WIDTH=72 HEIGHT=50 BORDER=1 SRC="images/examples/base.gif">
|
|
|
|
