Twelve Tips for Preparing Photographs for Web Pages

Twelve Tips for Preparing Photographs for Web Pages
By Gary Ferrington & Ken Loge

There have been occasions when one comes across a web site with images so large that they are painfully slow to download even with a DSL connection. The option is to wait patiently or find another site to visit.

Here are twelve tips to help organize and prepare images for display on the web. These ideas will help you create fast loading images and facilitate web image resource management.

Have your pictures organized in one folder on your web site facilitates quickly locating specific images and also makes adding or deleting photographs much simpler. Label the folder graphics or images.
Clearly label each image so you can identify it later on. But keep the title short. Standardized your labeling with lowercase letters and leave no space between words unless you use the "__" character as a bridge. For example, eugene_oregon.jpg.
Be sure to include an "ALT" tag when you insert an image on a web page. This gives those who using text readers information about the graphic.
Make the link paths to your images relative. For example, use something like: "images/eugene.jpg" or, "../images/eugene.jpg".
Choose to appropriately use either.gif or .jpg images when based on the idea that JPG is most often used when the images are photographs. The .gif syntax is primarily used when the images are charts, graphs, and illustrations. Note that only GIFs provide transparency if that is a factor in your web page design and if needed, a photograph can be save in a GIF format.
Optimize your pictures for use on the web. Begin with high resolution images that can be stored for safe keeping on an archive disc. Use a photo editing program such as Photoshop to generate images for the web from your archived originals. Never compress your original as it is changed forever once saved. A standard for the web has been 72 dpi for JPGs or GIFs.

We find that we can take a large 300 dpi image into Photoshop, resize it to the desired web page dimensions and then simple use the "Save For Web" feature that lets one select the desired quality of image.

Try to use the smallest file as possible size possible without loosing a lot of quality. Small files transfer quickly. A web page is best loaded in about 8 seconds at 56k.

The one thing to look for is how well the compressed images appear when compressed. Compression removes or reduces the number of colors and details. So testing is always advised.
Take advantage of various compression schemes offered by the software and try several .gif and .jpeg settings. Sometimes a picture you think has to be a JPEG looks good as a GIF, and is even smaller. .GIF images can have anything from 1 - 256 colors. Sometimes a .gif image can be made substantially smaller by reducing the palette to fewer than 256 colors. Using Fireworks' "2 up" or "4 up" preview mode, for example, allows multiple formats of images to be compared side by side as they would appear on a web page for optimal results. Photoshop can do this as well.
Although you can specify the height and width of an image in a program such as Dreamweaver, it is best if you use a photographic editing program to size your images in advance.
The stretching or squashing of an image that may occur by trying to define the image size when coding the page may result in the least favorable presentation of that image when screened.

The other thing is that using the height and width attributes in a program such as Dreamweaver does not make the image use less memory, or speed up the download time. The image, regardless of screen size, always uses the amount of memory required by the source image file from which it is derived.

Large images are not necessarily better on a web site. Small or smaller are often the ideal. The eye can just as easily read a small 350 pixel wide image, as it can one 640 pixels wide. Of course the decision about image size comes down to the purpose for which the image is to be used.

The use of thumbnail images linked to a larger copy is often a way to facilitate the screening of visual material that a user may want to see in more detail.
We also recommend that web graphics developers also make incremental saves when designing the artwork for a site. That way they can easily experiment without losing any of the permutations of ideas. For example, they might have "banner-1a", "banner-1b", "banner-1c", etc.

It's also not a bad idea to create "read me" or "dev notes" files for yourself that describe color schemes, layout notes, or reminders about why the graphics are the way they are, or what or who they were made for. I often keep these kind of notes files in the same directory as my image masters.
The use of photographic images for backgrounds can be distracting and aren't that often used in professional sites. However, if the image is very subtle and provides an enhancement for the site it should be considered a possible option. If it interferes with readability - don't use it.

An exception for use of a background image is a small "seamless" texture image that can be used to fill areas of the screen (i.e., a table) with a consistent pattern that loads very quickly. If the image to be tiled is very small it can add a lot of impact with very little overhead. It's easy to make a 1 pixel tall by 100 pixel wide image "slice" that takes less than 1 KB of file space, but can make a huge difference in the appearance of a web page when used as a tiled background.
The use of animated gifs, humorous clip art and other gimmick type images should be done so with great caution. There may be instances - such as a site for children - where such images are appropriate. Just don't use cute for a company's annual report online.
Prepare images for viewing on both a Mac and PC. In computer imaging and display screens "gamma" refers to the degree of contrast between the midlevel gray values of an image. The default gamma settings for Macintosh (1.8 target gamma) and Windows (2.2 target gamma) monitors are quite different, and this can lead to unpleasant surprises when you first see your images displayed on "the other" platform. Mac users will see darker and more contrasting images on Windows displays; Windows users will see flat and washed-out images on Mac displays. Most Web designers opt for a middle-ground solution, lightening images slightly if they work on the Macintosh; darkening slightly and adding a little contrast if they work in Windows.