Most sites on the Web today use images or graphics. The two terms are generally interchangeable in a Web context. (Sometimes a distinction is drawn between photographic "images" and line-art "graphics." We use the terms interchangeably.)

The most important principles for images and graphics on Alabama Agricultural Experiment Station, Alabama Cooperative Extension System and College of Agriculture at Auburn University (AAES/ACES/COAG) Web sites are that they should be relevant, professional, optimized for the Web and legal.

The principles and guidelines here deal primarily with static images, but the same principles generally apply to images in flash animations, video clips and other multimedia presentations.

If you do not have experience with creating and editing images for the Web, we recommend that you obtain assistance from someone who does. Visit the ACES/AG IT Web development site (see training).

General Graphics Principles
AAES/ACES/COAG Graphics Standards
Image Dimensions and Proportions (Size)
Creating Text Graphics
Using the AAES/ACES/COAG Image Gallery

Professionalism and presentation are important. The way your graphics are designed and presented is a reflection not only on your Web site and its information and resources, but also on the entity your site represents. If you do not have experience with professional design, we recommend that you obtain assistance from someone who does.

Relevance is important. The graphics on your site should be directly and obviously related to your site's content.

Legality is critical. Site developers must know, understand and comply with the rules of copyright for images on the Web, as well as in print. The easy availability of images on the Web, along with the anonymity of the Web, can create complacency about image ownership and copyright.

As a general rule, unless an image belongs to you or to the organization (e.g. is in the Image Gallery) or unless you have been granted express permission to use an image, DO NOT USE that image.  As a site developer, you are responsible for getting permission for the images used on your Web site and for keeping a record of the permissions you have been granted.

An important corollary to legality is ethics in the use of images and site content. AAES/ACES/COAG is committed to ethical Web development. If you have ANY questions about the origin, alteration, use or development of the content on your site, please contact your communications department for consultation.

It is important to have written permission on file for any photographs of people. It is especially critical to keep written parental permission on file for any photos of children under age 16. For a picture permission form, visit the ACES/AG IT Web development iste (see forms).

Finally, it is also important to understand the regulations for using AAES/ACES/COAG logos and wordmarks on your Web site.

If you require assistance choosing, obtaining or using images on your Web site, contact your communications department for suggestions. You may also refer to the online image gallery (which is under continued development) if you would like to use existing AAES/ACES/COAG images on your site.

• Keep all graphics for each site in the images folder. The link paths in your site should be relative (i.e. "images/graphic.jpg" or "../images/graphic.gif,")

• Use good syntax for naming images: lowercase letters, no spaces or extraneous characters except the hyphen [-] or the underscore [ _ ] character, short and descriptive file names.

• Avoid using background images (sometimes called background GIFs or tiling backgrounds). They are often distracting and rarely add to the professionalism of a site's appearance.

• Avoid flashing or animated GIFs. With rare exceptions, these icons do not add to the professionalism of Web pages or a Web site.

• Avoid using cute or whimsical clip art. Graphics should be professionally produced and presented.

• Pay attention to colors. Your colors should work well together and should complement the site's images and content. While you are not required to use the Web-safe color palette, we do recommend that you optimize your colors for the Web. The Web-safe palette provides a good way to do this.

• Use GIF and JPG images appropriately for the types of images on your site. (While some browsers can read WBMP images, it is not a good idea to use this format on your site.) For the most effective use of the relative compression algorithms, JPG is usually used for photographic images, and GIF is usually used for graphics with larger areas of common color and images that include text. It is important to note that JPG does not support transparency, so if you want a transparent image, it will need to be a GIF. You can simulate transparency on a JPG by setting it on a background identical to the background color on a Web page.

• Since all images on the Web are displayed at 72 dpi, save your high-resolution original images in an image editing program, then create 72 dpi JPGs or GIFs for Web use.

• Optimize your graphics for small file sizes. A Web page should load in about 15 seconds over a 56k modem. Full-featured image editing programs, such as Fireworks or Photoshop, provide tools for image optimization. These include reducing the color palette, creating slices and increasing image compression. Be careful that your selections for image optimization do not degrade image viewing quality.

• Always use ALT tags for images, as a component of accessibility.

• All AAES/ACES/COAG logos, wordmarks and symbols are copyrighted by AAES/ACES/COAG. Further information and regulations governing their use are in Using AAES/ACES/COAG Logos and Wordmarks.

• Do not resize images in browsers using HTML; this degrades image viewing quality. Resize your images in an image editing program such as Fireworks, Photoshop or Contribute.

• Present each image at 100% of its original proportions. Do not stretch or squish images to fit a particular area of your Web page. If you need an image at different proportions than your original image, either crop the image to fit the space at 100% proportions, or select an alternative image that better fits your Web page.

• In addition to using 100% dimensions and proportions for your images, please make sure that your images are prepared at 72 dpi in your image editing program. Browsers have to interpret images at other sizes, and the results are undesirable.

• Finally, larger images are not necessarily better; in fact, they often distract from the professionalism and usability of your site. Remember that people use browsers of different sizes, so a 4x6 image on your browser may take up most of someone else's screen. Use thumbnail images to link to larger images if necessary.

If you want to use a custom font, you should create a text graphic using Fireworks or Photoshop. Text graphics should be used sparingly because they increase download time.

AAES/ACES/COAG will provide a gallery of images online for official Web development at AAES/ACES/COAG. These images may or may not suit your needs; we will be adding images to this gallery over time. PLEASE NOTE that all images in the gallery are permitted for use on official AAES/ACES/COAG Web sites only.