Working With Web Graphics

Sources for Web Graphics

On the World Wide Web (in general)

Google Image Search
http://www.google.com/imghp?hl=en

AltaVista Image Search
http://www.altavista.com/sites/search/simage

Image Search Engines and Directories
http://www.bu.edu/library/training/isengines.htm

Free clip art Web sites (a sampling)

Barry's Clip Art Images
http://www.barrysclipart.com/

Animation-Station
http://www.animation-station.com

Art and Icon Hotlist
http://www.geocities.com/SiliconValley/2175/icon.htm l

Animation Factory's Mediabuilder
http://www.mediabuilder.com/

Clipart.com
http://www.clipart.com/
Subscription-based, although you may take the site for a test drive and try a sample search for images.

Royalty Free Music, Sounds and Voice for Multimedia
http://www.wickedwavs.com/
This is beyond what we have studied in the course, but you may be interested in other kinds of multimedia.

Images from a scanner
Camera photographs processed digitally, and posted on website, or provided in the form of a PhotoCD
Digital camera images
Original graphics created in a paint program (e.g., Paint Shop Pro, Photoshop, Graphics Workshop, etc.)

Clip art images that are shipped with your computer, for example as part of Microsoft Word or PowerPoint, or available for purchase elsewhere.

Guidelines for Using Image Files on Web Pages

Graphics on Web pages may take the form of bullets, lines, icons, click-able hyper linked images, background images, photos, artwork, etc. Images must be in either of the two file formats to be read by a Web browser:

GIF (Graphics Interchange Format, pronounced "JIF"), .gif - GIF files work best for graphics with contiguous areas of solid color, text, small icons or navigational aids, etc. Limited to up to 256 colors. To reduce file size, save gif files with 64 colors or less, depending upon the quality.

Good Example of .GIF Image

JPG (Joint Photographic Experts Group, pronounced "JAY-peg"), .jpg or .jpeg - JPEG files are more effective for photographic images or images with lots of subtle color and continuous tonal information. JPG can often result in a smaller-sized file than a GIF file because they are highly compressed. Use the LOW or MEDIUM quality compression setting when saving JPG files - it usually is acceptable.

Good Example of .JPG Image

Image files must be named with a character name (letters or numbers) with the extension .gif or .jpg for the format of the image. There must be no spaces in the filename.

Examples:

You can display graphics in one of two ways:

1. embed graphics in an existing Web page, or
2. link to graphics directly

Embedding a graphic is the most common way. You insert an IMG tag within your HTML document, e.g., <IMG SRC="filename.gif">. The graphic appears in your Web page at the spot where you have embedded it.

You can also link directly to your graphic file(s) rather than creating a Web page with lots of images on it. With this method, you create a Web page with links that reference the graphics, e.g.,<A HREF="path/filename.gif">Picture of School</A>.

Tools for Converting Graphics to Make Them Web-Ready

If you have a graphic that is not in a .gif or .jpg format, there are a number of file conversion tools or programs on the Web (freeware and shareware) that will convert them to the proper image file format. You also need an 'image editor' - a software application program to resize, crop, or touch-up your images. Adobe Photoshop, Adobe Photoshop Elements, JASC Paint Shop Pro, Macromedia's Fireworks, and Ulead's PhotoImpact are all examples of image editors. Here is one such site that recommends various image editors:

Image Editors
http://www.builder.com/Authoring/Cheap/ss07c.html

Visit your favorite search engine and search on the term "image editors" or "image editing (software)." You will also often find image editors in the Multimedia and/or Design sections of freeware or shareware sites. Here are two such sites with extensive software libraries:

Tucows
http://www.tucows.com

CNET Download
http://www.download.com

Hints and Tips When Using Graphics on Web Pages

Resize images to the size you want to be displayed on Web pages before placing them in your Web pages folder, and before referencing them in your HTML files.

Note: WYSIWYG text editors automatically insert the correct width and height dimensions for graphics into the IMG SRC tag. (This practice reserves space for the graphics on the Web page, lets the text display first, and avoids having graphics 'pop' into pages.) If writing HTML manually, don't guess at an image's dimensions. And don't use the HTML code's width and height dimensions or attributes to resize or modify the size of images.
Save image/picture/photo files in the proper graphics format for the Web.
Only GIF files can be made transparent (so that the background color of the Web page can show through the image), interlaced (so that the image is progressively revealed in 'venetian-blind' strips), or animated (produced with special graphics software programs (e.g., GifBuilder, Adobe's Image Ready, Adobe's LiveMotion, JASC's Animation Shop, and Ulead's GIF Animator, etc.))

Characteristics of GIF Files

File sizes make a big difference in the download time - and graphics files take considerably longer to load than text files. Use graphics sparingly because they take longer for a Web browser to load than text. Avoid large, high-resolution graphics. Your objective as a Web page creator is to produce the smallest, most efficient graphics files without compromising image quality. Large images are not recommended for Web pages - no greater than 30K, and no wider than about 450 pixels. And the image's resolution doesn't need to be any higher than 72 pixels (or dots) per inch.

Use the same image in different places on your Web pages throughout your site - your Web browser then needs to download the image only the first time.
Don't dominate your Web pages with gratuitous graphics. They just take extra time to download and view.
Use the Horizontal Rule Tag <HR> whenever possible (with attributes for thickness and shading) to create horizontal lines on your Web pages, rather than using graphics files as dividers between content. The horizontal rule created by the browser loads instantaneously, vs. the divider-graphic that loads slowly.
A link and an image tag may be combined together to create a clickable 'hot button'. For example, a graphic file named homebutton.gif (a self-explanatory picture of a home that indicates a return to the home page) may be created. A Border attribute of 0 removes the border around the graphic:

Avoid very "busy" or complex background graphics. Avoid having the text color too similar to the color of the background. Use light or pastel-colored backgrounds with simple graphics patterns, or use the browser's internal background color feature (e.g., <BODY BGCOLOR="#FFFFFF"> to create a white background).

Be original - don't just grab images from other people's Web pages.

Web Design Sites and Resources

Web Site Construction Center : 1000 Web Site Tools
http://www.1000websitetools.com/

Image Use on the Web
http://www.htmlhelp.com/design/imageuse.htm

About.com - Web Graphics Tutorials
http://webdesign.about.com/cs/graphicstutorials/index.htm

Web Style Guide
http://info.med.yale.edu/caim/manual/contents.html
Excellent reference and resource, with sections on interface, site, and page design, web graphics, and web multimedia.

Realm Graphics - One Stop Web Images
http://www.ender-design.com/rg/
This site has extensive collections of images for your web pages.

Assignment # 3: Using Graphics

Give the URL's and describe a few sites that you have found to be useful for graphics and image editors. (Save in a Word document)
What will be your primary sources of graphics for your own Web pages?
Create a folder called Web Page Development, and save this assignment to that folder.

Working with Graphics