Connections: Tips for Working With Images

Connections Home Page

Other Connections Resources

Writing Resources

Web Directories and Search Engines

Documentation Guidelines

Download Client Software

On-Line Newspapers and other News Sources

Government Sites

Humanities Sites

Resources for Writing Instructors

Scholarship on Hypertext and Computer-Assisted Pedagogy

English Home Page
Allyn & Bacon Home Page

Tips for Working With Images

Image File Size
Probably the single most important concern for graphical Web composition is the size of the image file‹not so much in terms of inches (we¹ll get to that in a moment), but in terms of bytes of stored information. The smaller the image is and the fewer images you have, the faster your page will load. Particularly for Web readers who are using modems, the amount of time it takes for pages to load is a major concern. It can be extremely frustrating to wait several minutes for a browser to download an 800 kb (kilobyte) image, only to find out that it is a flashy but nonessential part of the site. Web authors need to continually balance the desire for interesting and impressive graphics with practical concerns about the speed and efficiency of their pages.
The idea is to think small. Ideally, you should keep most of your graphics files under 20 kb. You may need to make exceptions for an opening banner or other important images, but in general, steer away from large images unless they are essential to the page. There are a few basic strategies that can help you reduce the size of an image.

The easiest way to reduce the number of bytes is by reducing the physical size of the image. Scaling down an image by removing an inch or two can make a significant difference in its file size.

The Web can only display graphics at 72 dots per inch (dpi), so saving files at higher resolutions won¹t make the images clearer. In fact, Web browsers read all images at 72 dpi, meaning that a four-inch graphic saved at 150 dpi will turn into an eight-inch graphic on the Web.

If you are using a transparent image or setting up an imagemap, you may need to use a GIF format. Otherwise, saving files in JPEG format will be more efficient, since they are generally smaller than GIF files. (We¹ll discuss file formats later in this section.)

Use only as many colors as you need. Using 256 colors drastically reduces the size of an image that was originally created in millions of colors. Similarly, reducing an image to 64 or 32 colors will shrink its file size even further, although eventually the resolution of the image will suffer.
There are also various graphics applications that do an impressive job of compressing image files. If you are doing a significant amount of graphics work, you might want to consider investing in one of these programs so you can experiment with the resolution and size of images.
Image Scale
In some ways creating Web pages should be compared to laying out newspaper or magazine pages rather than to composing long blocks of academic text. If you think of the screen as your working space, you can better understand the need to scale down the physical size of your graphics so that no single image will overwhelm the presentation. Screen ³real-estate² is a precious commodity in Web design. Placing a 6 x 6 inch graphic at the top of your page when you have only, say, a 7 x 10 inch window will leave you with almost no room to integrate the other elements of your composition.
Transparent Images
You may also want to make some of your images "transparent." Transparent images allow the background of your Web page to ³show through² by making one of the colors in the image ³invisible.² Web authors frequently use transparent images because they can be integrated more seamlessly into the page design. Because image files are saved in rectangular format, nontransparent images will be set off by this rectangular background when placed onto a Web page, resulting in an awkward appearance. There are many shareware applications that will allow you to make transparent images, such as Transparency (Mac) and GifWeb (PC). Note that transparencies require that you work with a GIF file instead of a JPEG.
Image File Formats
There are two basic file formats for graphics on the Web: GIF and JPEG. Both of these formats are cross-platform, meaning that they can be read by either Macintoshes, PCs, or UNIX-based computers. Since older PCs have strict naming conventions that accept only three character suffixes, files that are named .JPEG must be called .JPG on some machines.
When you¹re working with Web graphics, it is important to save your images as either GIF or JPEG files. As we mentioned above, JPEGs are usually smaller, so it is generally worthwhile to use this format on most of your image files. The major exception to this rule is if you want to make your image transparent, in which case you¹ll need to use a GIF file.
Note that, for browsers to read the image, the file extension must correspond to the format in which the file is saved. If you name a file that is saved in the GIF format ³picture.jpg,² the browser will be unable to properly display the image. The same, of course, goes for JPEG files that are named with the .GIF extension. Also remember that all image files must have an acceptable suffix in place. A file named ³picture.gifsmall² or ³jpg.pictureofme² will not be readable. The naming convention is strict in that you cannot use spaces or quotation marks in the name and you must attach the appropriate suffix.
Adapted from Connections: A Guide to On-line Writing