HOME » WEB DEVELOPMENT » AUTHORING AND PUBLISHING

IMAGES AND GRAPHIC ELEMENTS

Images contribute a great deal to the richness of the Georgetown Web. Images should be relevant to the content of the pages. Consider using the Georgetown image database, as these images contribute to the coherence of the Georgetown site.

Having too many images on a page can slow down the loading speed of the page and can distract from the content. You can speed up the image loading process by specifying the image dimensions in the IMG tag. (The default of FrontPage is to specify the image dimensions.)

Georgetown Web developers must abide by copyright laws when using images and graphic elements on the Web. For more information about copyright, see the Copyright section.

Georgetown Images and Graphics Elements

The GUide Committee has developed libraries of images and graphic elements that conform to the spatial layout of the recommended templates.

The image database contains scanned photographs of places, people, and events from around the University as well as graphic elements such as University seals and official fonts. These images vary in size, but most conform to the template layout in that they are 201 pixels wide, 402 pixels wide, or 67 pixels wide. If you are using any of these images for your pages, you should leave them in their original location on the Web server, rather than copying them to your local drive. You can do this by inserting them into your page using the full, or absolute, URL (i.e. http://data.georgetown.edu/graphics/images/image.jpg), rather than simply the image file name. For information on inserting images using Dreamweaver, you can take UIS training classes. If you create new images, it is recommended that you use the standard widths so your images will fit in the templates.

Other Images and Graphic Elements

If you wish to create your own images or graphic elements in your Web pages, you will have to insert them into your pages using relative paths (i.e. button.gif or images/photo.jpg) and then publish them when you publish your Web page. Some general guidelines extracted from the Builder, Adobe and Tucows Web sites are listed below to help you create Web-friendly images:

• The Browser Safe Palette provides the actual palette that Netscape and Internet Explorer use within their browsers, showing actual color examples and their hexadecimal and RGB equivalents by hue or value. The Browser Safe Palette only contains 216 colors out of a possible 256. That is because the remaining 40 colors vary on Macs and PCs. By eliminating the 40 variable colors, this palette is optimized for cross-platform use.
• Keep graphics under 10K if possible to facilitate faster image loading.
• Windows computers display 96 dots per inch (dpi). Macintosh computers display 72 dpi. Saving your graphics with a resolution greater than 96 dpi is overkill and will just make your files larger and take longer to download.
• Graphics should be no wider than 640 pixels. To avoid the reader having to scroll (to see the entire image), keep graphics no taller than 480 pixels. A 10-1/2" x 5-3/8" frame could be used for design purposes. If you are using the Georgetown Templates, your images should be no wider than the template column into which you are inserting them.
• Continuous-tone images look best saved as JPEG (medium or low quality is all you need) and also give you the smallest file size. If transparency is needed, save as GIF, using an adaptive palette with the fewest number of colors.
• Flat-color images (anti-aliased) do well without any dithering, so using an adaptive palette and a dither of none and then saving as GIF will give you the best results with the smallest file size. The number of colors you need will depend on the image, so try using the least number possible to get the smallest file.
• Black-and-white images need very few colors, so saving them as a GIF lets you select a low number of colors. (Six colors works well on an anti-aliased image.)
• Gradations look best with as many colors as possible, so JPEG medium quality is the best option for gradations. JPEG gives a much smaller file size than GIF with an adaptive palette.

Adobe Photoshop is one of the best image software packages available; however, it is fairly expensive. Microsoft Office and Corel WordPerfect Office both include scaled down image editors. You can also find lists of freeware and shareware image editors from ZDNet and Tucows. Remember that before installing anything on a Georgetown computer, you should consult the HelpDesk.

If you do not want to use the Georgetown images and graphic elements, or create your own, there are a number of places on the Web where you can get free backgrounds, borders, bullets, fonts, and animations. If you are thinking about using someone else's graphics, however, you need to be careful to comply with copyright laws. Do not assume you can simply use any graphics you find on the Web! Unless a site specifies that you are free to use its graphics for personal use, do not use them.