61 Pictures and Photographs

Use pictures and photographs to catch the eye of your audience.

The expression “a picture is worth a thousand words” is more than a truism. Images can convey powerful emotion. Images can illustrate a process or capture a moment with precision (such as a tight end catching the football on the goal line).

People who shun principles of design, who argue words alone should be sufficient, are really not in touch with the expectations of today’s readers. Perhaps because today’s readers are bombarded with information, they tend to be especially receptive to pictures and photographs.

Select appropriate images

Images are not inherently good. In fact, images can be detracting. You don’t want to pour images into a document that are unrelated to your subject. Because readers’ focus will be drawn to the images, be sure they are appropriate to your audience and purpose. Consider below two excellent examples of images.

	Environmental Web sites, such as The Nature Conservancy or The Sierra Club, use beautiful images from nature to help stimluate action. Consider, for example, the EPA’s Draft Report on the Environment. Take a minute to click through this report, while noting how the top banner image changes to provide a visual representation of the topic under discussion (land, water, air, etc.)
	It is interesting to note that the U.S. Census Bureau has set the main graphic to change every minute on its default page, Population Estimates, perhaps trying to “humanize” the population explosion.

The following summarizes common graphic formats, distinguishing bitmap images from vector images.

What are bitmap images?

GIFs (Graphics Interchange Format) and JPEGs (Joint Photographic Experts Group) are bitmaps; they use pixels to display colors. In other words, bitmaps use a grid of squares, and each square, each pixel, can represent a color.

Different computer monitors have different numbers of bits they can display for each pixel. A bit is the smallest amount of information stored by a computer. For example, a 2-bit monitor can display two colors for each pixel–either black or white. An 8-bit monitor can dedicate 8 bits of memory to each pixel to represent a color, whereas 24-bit images use 24 bits of memory for each pixel to represent a color. While monitors differ, you can typically count on a monitor having between 72 to 100 pixels per inch. As technology evolves, the quality of monitors will expand, and so, too, will the quality of graphics.

When you plan to represent an image on a page that will be printed, you need it saved in at least 300 dpi (dots per inch).

When users make a bitmap image larger, the computer guesses where to put new pixels between the old pixels, resulting in a blurry image.

GIF (Graphics Interchange Format)

Developed by Compuserve Information Service in the 1980s, GIFs are the most common format of Web graphics on the Internet. GIFs can present 8 bits or 256 colors, using the Internet color palette. Because they do not display millions of colors, GIFs can download fairly quickly. Conventional GIFs download one pixel at a time, while interlaced GIFs display the overall image fairly early in the download, giving the reader a blurry image of the graphic, and then move from blurry to sharp as the image downloads.

JPEG (Joint Photographic Experts Group)

JPEGs provide a superior image to GIFs because they can display 24-bit, true-color images. While GIFs have 8 bits of memory dedicated to displaying a color for each pixel, JPEGs have 24 bits of memory dedicated to displaying a color for each pixel. Thus, photographs and drawings can be rendered more accurately by JPEGs.

JPEG files are larger than GIF files, yet you can typically choose different compression file sizes in graphic applications. For example, you can make JPEG file sizes 100 times smaller than the original file size. Each time you compress an image, you erase information, so you need to be careful that you do not so overly compress an image that it becomes worthless. JPEG compression tends to degrade computer-generated graphics.

PNG (Portable Network Graphic)

According to Web Graphics and Presentations, PNGs were designed for the Internet to have all of the benefits of GIFs, yet to

• Provide superior compression and interlacing. GIFs can display the outlines of an image once it receives 50% of the information from the file. In contrast, a PNG image is recognizable once 25% of the image is available.
• Create smaller files. PNG files are 5 to 25% smaller than equivalent GIF files.
• Allow users more than one color for a transparent background.
• Compensate for differences in gamma–that is, the level of contrast in an image. PNGs can be displayed equivalently on Macintosh and PC platforms.

At this point, however, PNG files cannot display animated images.

What are vector images?

Vector images use geometrically defined shapes such as lines, arcs, or polygons, which are used to represent images as opposed to pixels. When vector images are enlarged, they do not degrade. The computer doesn’t need to guess about where to add additional pixels. Instead, the geometric shapes are simply scaled in larger or smaller formats, without blurriness.

Vector images are useful to display graphs, charts, and diagrams. They allow users to focus in on a part of the diagram, to magnify some part of the image. Vector images are generated by spreadsheet programs, 3D applications like AutoCAD.

What are image maps?

An image map is a map that has embedded links. In other words, as you move your mouse over an image, you can access links. The following is an image map.

Learn NC: An image map of North Carolina, this map is linked to a database on NC educational resources

Note:  Just a quick reminder – too many images or too many animated visuals can distract and confuse the reader; likewise, too many colors, or sizes of headings are also distracting.  Make sure you test your web design (with visual included) with test readers or classmates to make sure you didn’t overdo your visual components (which is easy to do!).