Best Practices for the Web

JPEG (.jpg)
Used for photographic and textured graphic images; 24 bit color.

GIF (.gif)
Used for solid colored graphics; best for drawing and illustrative graphics; 8 bit color.

• Most common format
• Limited color palette
• Can be animated
• Supports transparent background
• See http://www.widearea.co.uk/designer

PNG (.png)
Relatively new format.

• Supports illustrations and photos
• Supports transparent background
• See http://libpng.org/pub/png/slashpng-1999.html

Don't "borrow" graphics from other websites. If you must use an image or text from another site, credit the site and author, or prefereably link to the original image.

Optimize files for the web

• Reduce the number of colors when possible
• Make images the precise size needed
• Set compression for best compromise between file size & image quality

Don't use graphics as text unless necessary.

Compress and optimize images. These are the two easiest ways to decrease load time and make a site more accessible.

Don't resize the image in HTML. Use image software such as Photoshop or Photoshop Elements.

Formula for calculating download times:
modem speed (kilobits) / 8 (8 bits per byte) = kbyte transfer rate.

• Filesize (kb) / kb transfer rate = download time for page
• http://www.bri-mar-dit.com/FYI/DOWNLOAD.HTM
• Example: 66 kb total size of multiple images on one page:
  
  66,000 / 3,600 = 18 seconds to download on a 28.8K modem
  66,000/7,000 = 9 seconds to download on a 54K modem

HTML editors such as Macromedia Dreamweaver and Microsoft FrontPage have built in template functionality to help keep design and structure consistent throughout a website. Editable regions are assigned, which makes creating and updating content simple without risking corruption to more complex design and navigation. Changes to content outside of the editable areas is done through the template page, and then applied once to all the pages based on that template.

Templates are an easy way to build websites for people with limited experience using web design tools. In addition to many templates available through software manufacterers, the University makes templates available to departments and campus organizations who wish to integrate their look and feel with the University.

• University Templates

U Logos
At long last! Here is a collection of university logos and graphics optimized for web use.

Buttons and links
Provides buttons to important links such as the Interactive Campus Map, Graduate School's Why Utah, Send a Postcard, Screensavers of the U, 2002 Olympic Coordination Office, etc. HTML instructions are also available.

Medical Graphics & Photography
A medical image library and icon resource page provided by the Health Sciences Medical Graphics & Photography department.

Olympic Stadium
An image gallery containing photos of the Rice-Eccles Stadium during the 2002 Olympic Winter Games and 2002 Paralympic Games. Photography by Ciming Mei, Media Solutions. Optimized for web use.

Olympic Village
An image gallery of photos featuring the Fort Douglas Heritage Commons during the 2002 Olympic Winter Game. Photography by Ciming Mei, Media Solutions. Optimized for web use.

U Photos
Provides photos of the U campus, students, sports, and research. These images have been optimized for web use.

U Communications Campus Photos
This is a collection of campus photos published by University Marketing and Communications. Print quality large versions are available by clicking on the thumbnails but the images have not been optimized for web use.