Preparing Images for the Web

From time to time I come across a picture laden web site that seems to take forever to download. One reason, of course, is that the site's author has not properly managed the formatting of scanned image files for web page distribution.

It is important to understand three factors involved in preparing accessible images for the web. One, is to select the correct file format for graphics and photographs. Second, is to reduce the image's dimensional size. And third,create the smallest memory file.

Although some browsers can read a variety of image formats the most accepted are in a JPG or GIF file format.The JPG format is used for photographic resources. Graphics and illustrations use the GIF format. It is important that a PSD, PICT, TIFF, BMP, or EPS image file be converted to a GIF or JPG using a software program such as Adobe's Photoshop, or Macromedia's Fireworks.

The original photograph used in this discussion was scanned at 300 dpi and saved as a PhotoShop PSD file. That file is 1350 x 900 pixels in size and weighs in at 3.4MG! Given that a web page should take 8 seconds to download at 56K, such a large image file would require many minutes to access and its size would dominate the screen when loaded. So, how do you prepare a image for web based delivery? Here are some basic tips. More techniques can be found in books and tutorials related to specific graphic software.

To prepare this image, I took the original 1350 X 900 picture and resized it to 200 X 134.This by itself would make downloading faster. But to make it even more efficient I saved the image as a JPG resulting in a 100KB file.

Saving an image as a JPEG alters the image quality.One change is a reduction in the amount of color retained from the original. Second, the original image scanned at 300 dpi is now reduced to 72 dpi making for even less detail.

This image will load quickly if the user has a good connection. But a web designer can make it even more accessible using the compression feature included with image processing software.

This example uses the same resized PSD file. But now instead of simply saving it as a JPEG I used Photoshop's "Save For The Web" optimizing feature. One optimizes the image by compressing it anywhere between "0" and "100" percent.

I optimized this image at 100%. The resulting file is now only 72KB in size. Again there is loss of details and color. But there is little visual difference between this image and that above.

The "Save For The Web" feature was also used for this third example. This time the compression rate was set at 50%. The resulting file is now only 8KB.

Although the image is a bit more blurry and the color of the sky is less blue than the two previous examples, this picture should load in 2 seconds over a 28.8KPS modem and even more quickly using faster Internet connections.

I have used small images as examples to facilitate quick downloading of this page on your computer. So to see this image more clearly I have made a link to a larger example on another page. Using images as linked "thumbnails" makes it possible to have large images available for those who want to see more. Click on this mountain scene to see how this applies.

PSD. This is Photoshop's default file format. It allows one to change color and add or remove layers. Given the extensive use of PSD files many other software programs have included the ability to open and edit PSD files.

A GIF (Graphics Interchange Format) is the preferred Web format for graphics, charts, line drawings, and flat color illustrations with 256 color or less. Line art saved as a JPG will contain "artifacts’ in areas of solid color. Photographic images look washed out when saved as GIF's. And if possible, never convert a GIF to JPG as image quality will be lost.

The JPEG (Joint Photographic Experts Group - a.k.a. JPG) is the format used for photographs and images that contain more than 256 colors. This file format facilitates compression by selectively discarding data. The more compression the more loss of color. Every time a JPEG is copied it loses quality. A web designer should keep an original PSD or TIFF file and make a new JPG each time it is needed.

A relatively new file format is the PNG (Portable Network Graphics). Some of the newer browsers are able to read this format which facilitates compression 10-30% smaller than GIF which the PNG format is designed to replace.