Go back to Articles menuWeb line art
John Winn, Professor of Chemistry, Dartmouth College
The previous article on Web images discussed ways to acquire and display images that one could generally categorize as "photographs," often because that's what they once were. Here, we look at another category of images: line art. These images include graphs, diagrams, and other representations that are common in the physical and social sciences, but we will also consider images that these disciplines need simply to overcome the limited typographic options of Web text.
File formats for line art
Charts, graphs, plots, diagrams. Whatever you call them, the images that fall into this category are in constant use in the classroom. They typically are drawn with a few straight line segments, some symbols that bring out the information, a little text to label everything, and a few colors at most. The display requirements for such art is very different from those for images with the full range of color and shape detail that a photograph of a natural scene demands.
Fortunately, the Web browsers in common use today have the ability to use two very different types of image files so that browsers do a good job with either category of image. It is up to you, the Web page designer, to pick the best type of file for your particular image, and the goal of this article is to point you in the right direction. The final decision about what looks best is up to you, your image, and the goal of your Web presentation.
Let's start with a typical photographic image and use it to explore the two most common broad classes of image file types. These are called "JPEG" (often pronounced "jay peg" and short for "Joint Photographic Experts Group") and "GIF" (pronounced variously "jiff" like the peanut butter brand or "giff" with a hard "g," and standing for "Graphics Interchange Format"). Below are three versions of the same photo, one JPEG and two GIFs.
Photo JPEG
Photo GIF 1
Photo GIF 2
All three images are recognizable, but only the JPEG version looks like a photo. The first GIF looks like a 50s' paint-by-number picture — blotchy regions of one color — while the second GIF, which has more color detail, has patterns of color rather than smooth shades of color. The GIF image format fails to do a good job with photo images for reasons that will become clear.
But when we look at line art, we find the opposite is true. Suppose we have a set of experimental data points that we want to display as a line graph. A great place to start is a spreadsheet program, such as Microsoft Excel, that can generate graphs of data and often save these graphs "for the Web." Here are two such graphs, straight out of Excel, but saved in each format.
Raw Excel plot, saved as a 11,273 byte JPEG file
Raw Excel plot, saved as a GIF file of only 3,315 bytes
The GIF is not only crisper and sharper, it is also a smaller file, which means it will appear on your user's display faster. We now have empirical proof of dictum number one for line art: GIF is (almost always) better than JPEG.
So why is JPEG bad for line art? It does a great job with color, but it throws away information in the original image in order to produce a smaller file. For photographic images, this works well. Our brains are willing to give up resolution and still let us see the essence of a photographic image. But for line art, the information thrown away leads to the artifacts as seen in the Excel plot JPEG above. Note the halos of odd color around text or other sharp edges, such as the intersection of grid lines.
Making better line art GIFs
Now that we know to use the GIF format, we must consider how to use it to greatest effect in an instructional Web site. The default raw image generated by an application such as Excel is almost never the most effective. While our GIF plot above looks pretty good, it has one or two attributes that could be improved. First, the text itself may be too small to be seen easily if projected in a large classroom, something you may often need to do. Second, it is not very vibrant. It is flat and relatively colorless. As you plan your Web pages, it is a good idea to consider things like color choices and font styles and sizes right at the start. These are not concerns for most traditional classroom instruction (just write big and clearly on the blackboard, and use colored chalk if it makes sense to do so), but for the Web, these new dimensions are worth exploiting.
Contrast our original GIF plot with the one below, which was designed for classroom display. The font size is larger, the font style is a good one for display, the grid lines are colored lightly so that they don't dominate the main information, and the plot area is white rather than gray, again to bring out the data. The data points themselves and the line connecting them are shown using symbols and line thicknesses that stand out as well.
The original Excel plot is shown here as a 3,769 byte GIF image that has been enhanced for readability when projected. The image was also edited to enhance the information the plot is intended to convey: the axis labels stand out in color, and the data points themselves stand out against the less cluttered plot background.
The time you spend planning your line art is repaid in student understanding. The plot above screams "pressure increases rapidly with temperature" (these data are the vapor pressure of a particular compound at various temperatures) while the original plot screams "here's a blue line on a gray background."
Mathematical expressions and other issues
Web typography currently lacks many of the controls needed to display other common types of instructional images such as the mathematical equation and chemical formula. Simple subscripts: H2O and superscripts: x2 are available through HTML, but these are not enough, and you can see that the line spacing in this text has been distorted by the super and subscripts. Moreover, common symbols outside the basic Roman alphabet are either difficult to access or are displayed in different ways by different browsers or by different computer platforms. The Symbol font, which works so well in word processing applications that are designed for the printed page, is not always good to use in Web text. Instead, mathematical equations or complicated chemical formulas often need to be created in an "equation editor," then exported to an application that can convert them to GIF images. This is a tedious step, but the result is worth the effort. As you plan equations for Web display, keep in mind that they are often easier to read (or to project in a classroom) if the font is a "sans serif" font, such as Arial or Helvetica. A "serif" font may look too fuzzy, and no matter what the font, readability is always improved if the font size is increased above the size you might pick for a traditional printed document.
GIF image of an equation using a serif font at 12 point size, as in a word-processing document intended for traditional printing.
GIF image of the same equation using a sans serif font at a larger size. Note the increased readability.
There are often times when a technical expression makes best sense if it is part of the main body of text rather than a separate displayed image. These are the most difficult situations to treat. On the one hand, you can create a small GIF image of the symbolic part of the text that you can't represent through ordinary HTML and insert it into the text. HTML does allow images to appear anywhere. But on the other hand, exactly where the image appears in relation to the surrounding text varies from browser to browser and from platform to platform. What may look fine using Netscape on a Macintosh may look horribly aligned using Internet Explorer on a Mac or Netscape on a Windows machine.
The examples below show a small GIF image imbedded into regular HTML text using various HTML image alignment options. Placing the image so that the bottom of the "x" in the image has the same baseline as the HTML text surrounding it is tricky and browser-dependent. What's more, browsers such as Internet Explorer that can display HTML type in various sizes will not scale the GIF image along with the text!
The square root of x 1 is symbolized GIF image of "the square root of x-sub-1" with the image alignment at the HTML default setting. |
The square root of x 1 is symbolized Here, the image alignment is at the HTML "bottom" setting. |
The square root of x 1 is symbolized Here, the image alignment is at the HTML "absbottom" ("absolute bottom") setting. |
The square root of x 1 is symbolized Here, the image alignment is at the HTML "absmiddle" ("absolute middle") setting. |
.
The best approach is to use plain HTML whenever possible to represent mathematical equations and use images only as a last resort. As shown above, images are difficult to integrate and do not scale for users who need enlarged type. The World Wide Web Consortium has a recommended mathematics encoding language, MathML, that promises to resolve some of these difficulties. However, MathML must become fully supported and integrated into standard browser software before it can be considered a practical option.
Remember, whenever you include images on your pages also provide a text equivalent using HTML ALT-text. This is particularly important when you are using images to convey concepts, such as with the mathematical equations discussed above. There are plenty of people who cannot see images, whether because of physical or technical limitations. If you do not provide ALT-text, people who cannot see your images will not be able to make sense of your materials. The following is the HTML code with ALT-text for the images above:
<IMG SRC="graphics/image2/sqrt.gif" WIDTH="18" HEIGHT="11" ALT="Symbol of the square root of x-sub-1">IN SUMMARY, line art presents Web display challenges that are very different from photographic art. The discussion here should point you in the right direction toward attractive, informative, and readable Web line art, but the best choices of format are still up to you and the goal of your Web page. Plan in advance, try several formats on typical images, preview them in as many common browsers and platforms as you can, and don't be afraid to experiment!
Page information
By John Winn
Copyright 2002 Trustees of Dartmouth College
Added: 15 May 2002