In the interest of better Web design, we offer some tricks to improve graphic load time and presentation:
Be
careful you don't have images (such as a banner or a masthead) that run
across the top of your screen and off the right side of the monitor.
This can happen if you are designing your web graphics using a high-resolution
monitor. Many people set their monitors to a resolution of 800 x 600 pixels.
If you're working on a higher resolution monitor, the best way to avoid
this problem is to keep graphics at a width of 750 pixels or less.
Save images as "interlaced." This allows a GIF to load into the browser
as a fuzzy, pixilated picture that slowly comes into focus. Whether this is a pleasing effect is a matter of taste. Test your
graphics both with and without interlacing to see for yourself how it looks.
If you are displaying large graphics, such as photos, give your readers
the opportunity to decide if they want to see them or not. The best way
to do this is to make a "thumbnail" or miniature
version of the graphic, which links to a larger version of that image.
The thumbnail gives readers a preview; if they are interested in seeing
the larger version they can click on the thumbnail.
Typically, a border is displayed around each linked graphic, which may not be visually pleasing. If you don't like the way it looks, eliminate it by adding "border=0" to the <img> tag. You can also
add additional tags to align the graphic to the right or left of text or to the top,
middle, or bottom of a graphic. These extensions may look different in
different browsers, so test your pages in several browsers to see how they look, then make adjustments as necessary.
Finally, as a courtesy to people who may be reading your pages in text-only mode and for those who are visually impaired, include an "alt" tag inside the image tag with a brief description of the graphic.
Last update: Jan 5, 2008
Explore More: Search the Web
Learn the Net (www.learnthenet.com) is
Copyright 1996-2008. Michael Lerner Productions.
All Rights Reserved.
In the interest of better Web design, we offer some tricks to improve graphic load time and presentation:
Use the Site
Be
careful you don't have images (such as a banner or a masthead) that run
across the top of your screen and off the right side of the monitor.
This can happen if you are designing your web graphics using a high-resolution
monitor. Many people set their monitors to a resolution of 800 x 600 pixels.
If you're working on a higher resolution monitor, the best way to avoid
this problem is to keep graphics at a width of 750 pixels or less.
Save images as "interlaced." This allows a GIF to load into the browser
as a fuzzy, pixilated picture that slowly comes into focus. Whether this is a pleasing effect is a matter of taste. Test your
graphics both with and without interlacing to see for yourself how it looks.
If you are displaying large graphics, such as photos, give your readers
the opportunity to decide if they want to see them or not. The best way
to do this is to make a "thumbnail" or miniature
version of the graphic, which links to a larger version of that image.
The thumbnail gives readers a preview; if they are interested in seeing
the larger version they can click on the thumbnail.
Typically, a border is displayed around each linked graphic, which may not be visually pleasing. If you don't like the way it looks, eliminate it by adding "border=0" to the <img> tag. You can also
add additional tags to align the graphic to the right or left of text or to the top,
middle, or bottom of a graphic. These extensions may look different in
different browsers, so test your pages in several browsers to see how they look, then make adjustments as necessary.
Finally, as a courtesy to people who may be reading your pages in text-only mode and for those who are visually impaired, include an "alt" tag inside the image tag with a brief description of the graphic.
