Build It Better and They Will Return

By Ralph Tolbert, Educational Technology Consultant ()

One of the topics with the most hits (offerings) at the recent SchoolNet Technology Conference was the developing of school Web Sites. Many workshops covered the details of Web publishing: software, content, structure, Good vs. Bad and more.

One topic that was not covered is the process of producing graphics for the Web. Recently my Dreamweaver (www.macromedia.com) workshop checked out some poorly designed school Web Sites at www.webpagesthatsuck.com and found a school sight that had images that were still at original file size and took over a minute each to download on a T-1 line.

Teacher Web designers have been instructed to resize graphics to accelerate download times, but resizing images on the page using just the H and V will invoke the opposite of the theory from "Field of Dreams" Build It This Way and No One Will Return.

There are free or inexpensive graphic editing programs available: Graphic Converter for the Mac, Irfenview for the PC and my favorite for both platforms, Photoshop Elements 2 which I will refer to as PE2. This software imports most common file types, has adjustment tools, works with layers, and when saving has a Save for Web feature.

OK, you have your image, scanned or digital camera ready to process. Now what?

Before anything, improve the picture quality by adjusting the contrast, brightness and resolution, which should be set at 72DPI or 96 DPI for viewing on a monitor and sharpening (Unsharp Mask).
Use the crop tool to remove the unwanted portion of the image. While on this topic, travel to http://www.useit.com/alertbox/9611.html for a good discussion on Relevance-Enhanced Image Reduction. Better Thumbnails Scaling reduces the image so much that pictures with extensive detail wash out and become too crowded to be meaningful. Cropping preserves those details that are within the new viewport, but at the cost of losing the context of the image as a whole. Jakob Nielson recommends a combination of cropping and scaling, resulting in a technique called relevance-enhanced image reduction.
On to the Save for Web found under the File Menu. In this feature your image appears in two windows, one for the original and a second for comparing your new setting. PE2 allows the following changes: file type JPG for photos and Gif for line art. Most importantly, set the image size in pixels to the required size for viewing on the Web Page. As you apply each setting, PE2 will update the estimated download time to allow you to choose the settings you can live with for download speed. As a point of reference, most Web pages are viewed on an 800 x 600 screen size, so a graphic that is 200 pixels wide would occupy one-fourth the Web page width.

Animated banners can be easily created in PE2 that can be inserted in your Web Pages.

File New. Now select the Banner for default size of 468 x 60.
Create the text/graphics within the boundary.
Under Layer menu, add additional layers that contain changes to the original layer. Here you can think of the old Flip Paper animations or Walt Disney cell animations that create movement.
File menu and Save for the Web. Select GIF for file type, Animate, Looped, and chose the animation time for each layer. Click the preview in Browser button to see your own animated Gif that can be viewed on your Web Site.

Just remember The Tolbert PowerPoint Rule also applies to Web animations: "Just Because You Can, Doesn't Mean You Have To."