|
Limit graphics to those critical to the content of the page. They should
reinforce your content, not detract from it. Create fast-loading graphics
and test their appearance on different monitors and browsers.
Reduce the physical size of the graphic:
- All images should have a resolution of 72 pixels per inch and should
appear on the web page without being enlarged or reduced.
- When larger images are needed, limit the number on each page. A good
practice is to put a small thumbnail on the page and link to the larger
image. Warn the viewer if the larger image will take a long time to
download.
- Splice a large graphic into smaller pieces and insert them into a
fixed-size table.
- Avoid forcing viewers to scroll horizontally by sizing wide graphics
or tables to fit well within a typical viewer's browser window.
Reduce the number of colors:
- Use the fewest number of colors possible without degrading the image.
Photographic images should use a maximum of 256 colors. GIF images should
use as few colors as possible.
- Test the image on different monitors and browsers.
Reduce dithering and anti-aliasing:
- When creating text as an image file, leave aliasing on. Very small
text will be much more legible.
- When preparing GIF files, use a non-dithering color palette unless
dithering is really needed.
Use the right file format:
- Generally, the JPEG format works best for photographs and graphics
with gradual changes in color.
- Use the GIF format for line drawings or graphics that have solid areas
of color or sharp changes in color.
- The GIF format also supports transparency. If the image will be placed
on a color background, avoid fringes on the edges by creating it on
the same or similar background color.
- Generally, when the graphic is a button that has text on it, use the
GIF format with the web-safe color palette. The color will not dither
and cause the text to be illegible.
Use image compression tools:
- Compress images as much as possible without degrading the quality.
Test the image on several different monitor types and resolutions.
- Use an image-editing program that shows previews of various compression
settings for both JPEG and GIF files. In addition, you may use a separate
image compression tool that will compress images even more.
- The recommended target limit for all images used on a page is less
than 35k total. For main, graphics-rich pages, 80k may be acceptable.
Use image width and height tags for all images:
- Always include the height and width attributes
- Do not try to resize the image in the HTML code. Edit the graphic
in your image-editing program to resize it.
Use backgrounds that do not detract from your content:
- Always specify a background color; do not rely on the default.
- Do not use cluttered or busy background images.
- If you use a background image, specify a color similar to it for the
background. If your image does not load, the page will still be readable.
Recycle graphics whenever possible:
- Instead of creating new icons for every page or topic on a page, reuse
ones you already have.
- Do not duplicate the same graphic in several different directories
of your site. Use one centrally located folder for all graphics that
are shared between several pages.
Limit the usage of animation graphics:
- How much will you really like that animation
the twentieth time you access it?
- Use animations sparingly. Too much movement on the page detracts from
the focus of your content and greatly increases the download time.
- Limit the number of loops in the animation to a maximum of five or
allow the viewer to turn them off.
- Avoid large animated GIF files.
- Avoid scrolling text on every page and don't make text blink.
- Limit the usage of Flash animations. A full Flash animation for a
splash page may be acceptable, but always allow the viewer a way to
skip the movie. Ideally, a splash page created in Flash should download
in less than 15 seconds.
- Test your animation in different browsers and on different computers.
Audio and video files should support and add value of your content:
- Audio files should be as small as possible. Allow the viewer to start
and stop audio files. If the files start on download, provide a way
for the viewer to turn the sound off.
- Plug-ins are generally required for audio and video files. Warn the
viewer that one is needed and provide a link to a download page.
- Always tell the viewer the download size.
- Do not assume that your audience will hear the sound.
- Test your audio/video files on different computers.
Include comments in the HTML code:
- Include comments to assist you or someone else in making revisions.
- Include a comment in the HTML code about who designed and approved
a key graphic. Also include the creation or revision date. If a change
is required later on, this information could be useful. It can also
serve as a reference for anyone who may want to request permission to
use it.
- Clean out any unnecessary comments created by the graphics editor.
Observe copyright laws for all graphics:
- Do not use graphics or code from another site or sub-site without
asking for permission.
- Do not use images scanned from magazines, newspapers, or any other
document without permission.
- Do not copy graphics from public domain "clip art" sites without knowing
the copyright restrictions. Some sites will allow usage of the graphics
by educational or personal sites, but not business-owned sites. Others
may allow usage, but want a credit line posted.
- Document the source and the copyright release.
- If in doubt about copyright, don't use it.
|
 |
|
|
|
