Hypermedia: An Introduction--Part 3

Stuart Moulthrop & Nancy Kaplan
University of Baltimore
School of Information Arts and Technologies · Revised 2008

Part 3: Color and Graphics

3.1 | ADDING COLOR TO WEB PAGES

Color is a useful and important element of Web design. You can specify colors for several HTML objects, including the background for an entire page and the main body text. You can also assign colors to several aspects of the link cue: when it marks a link to a page not yet visited; when it marks a link to a previously visited page; and when it is currently active (i.e., while the mouse button is down over the cue).

There are several methods for specifying colors. Some of these belong to the earlier versions of HTML (3.2 and its precursors), while the more modern techniques involve Cascading Stylesheets, a component of HTML 4.0 or Dynamic HTML. Major browsers support all methods of color setting, though at least one (the FONT container) has been deprecated by the W3C, marked for exclusion from future standards. See our discussion in Part 1.

As a general rule, you should use Stylesheet (CSS) methods to set color for page components. We cover this method below, and more extensively in Part 7.

This section of the Notes also discusses non-CSS methods, which, with the exception of the FONT container, remain useable. However, since they are largely obsolete, we tell you about them mainly so you will recognize them in older bodies of code. This is not an idle or academic need: Web designers frequently need to update sites and pages produced long ago, and left to molder. Knowing how things used to be done can be very important, if you're assigned to make things current.

3.1.1 · In the <BODY> Tag

With Navigator 1.1 (early 1995) Netscape introduced solid-color backgrounds for Web pages. This technique was later incorporated into the HTML 3.2 specification.

Background colors are set by adding a BGCOLOR attribute to the initial BODY tag (the first tag of the <BODY></BODY> container); for example, the BODY tag of this page contains the attribute BGCOLOR="#FFFFFF" which sets the page background to white. (More about that mysterious series of "F"s a little later on.)

Under the HTML 4 specification, page colors can be set by name (e.g., bgcolor="white"), though it is always better to specify colors numerically, using hexadecimal coding, discussed below. Meanwhile, here's an illustrated list of supported color names.

A number of other attributes can also be added to BODY in order to set page colors:

BGCOLOR	Sets a solid background color for the entire page.
TEXT	Sets the color for all text in the page body, including heading and list elements but excluding horizontal rules.
LINK	Sets a color for text cues leading to pages that have not yet been visited.
VLINK	Sets a color for text cues leading to pages that have been visited.
ALINK	Sets the color text cues turn when the user clicks on them. Unless the user holds the mouse button down, this color disappears very quickly.

3.1.2 · BGCOLOR in the <TD> Tag (Tables)

In the 2.0 release of Internet Explorer (early 1996) Microsoft implemented custom background colors in the cells (<TD>) of HTML tables; see the notes for Part 4 for details. Netscape incorporated this feature in Navigator 3.0; now both browsers allow BGCOLOR as an attribute for <TD> in tables, letting authors color table cell backgrounds individually.

3.1.3 · Applied to a Short Span of Text

Before HTML 4.0, specifying that a short span of text be displayed in a particular color or size required a <FONT></FONT> container with COLOR and/or SIZE attributes. HTML 4.0 accomplishes these effects through style rules. These rules can either be specified as values for a STYLE attribute in some tag (for example, <P>) or they can be spelled out as part of a stylesheet. (For further treatment of stylesheets see Part 7.)

To change the color of the text in an entire paragraph to purple, write:

Markup	Output
`<P STYLE="COLOR: #CC0099"> This is some purple prose. </P>`	This is some purple prose.

To change the color of a single word or phrase, you can add a STYLE attribute to a <SPAN> tag. In the example below, only the word "purple" is treated:

Markup	Output
`This is some <SPAN STYLE="COLOR: #CC0099">purple</SPAN> prose.`	This is some purple prose.

3.2 | THE MYSTERIES OF COLOR CODE

3.2.1 · Colors By Hexadecimal Code

Whether you're using the old, HTML-3.2 color stylings, or the more up-to-date CSS methods, you'll need to understand how color values are specified for the Web.

The most precise and reliable way to specify colors for Web pages involves hexadecimal specification; colors are invoked as a trio of numerical settings for red, green, and blue (RGB). These numbers are written in the base 16 numbering system, which to the untrained eye looks like a strange hodgepodge of letters and numbers.

In other uses of an RGB system (for instance, in popular graphics programs), the values are usually given as regular, decimal numbers. I can specify a vivid RGB blue in Photoshop by plugging in 11 for red, 4 for green, and 232 for blue. But in HTML things are a bit different; actually, 8 bits different.

The HTML color scheme was devised for graphics systems that devote 24 bits of information to the color value of any given pixel. This was the high end for graphics cards in the early 1990s. RGB color implies three registers, each with 8 bits allotted to it (8+8+8=24). A bit is a binary element that may have one of two values, 1 or 0. Thus each of the three registers of the RGB color system can hold one of 2⁸ or 256 values, making the total number of available colors 256³ or 16,777,216 (a number once identified in video card settings as Millions of Colors).

Having both 2 and 8 among its factors, 16 is a convenient number for binary systems and particularly for 8-bit arrays. Machine-code programmers regularly work in hexadecimal, so it seemed natural enough to Tim Berners-Lee and friends to handle HTML color in this way.

Okay, it's weird. But just imagine how impressed your friends will be when you notice how well their 33CC99 wallpaper matches the 006600 carpets!

3.2.2 · The Joy of Hex

A few words about base-16 numbers: they differ from decimal (base-10) numbers in that they advance by sixteens instead of by tens; this means that in counting from 1 -- which is the same in any number system -- to 10 -- which is ten in decimal but sixteen (decimal) in hexadecimal -- things get a little strange. To wit, you need six more numerals in base-16 to count from 1 to 10:

Base 10
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16
Base 16
1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10

As we've observed, Web colors are based on 8-bit registers, meaning the maximum value for each of the three color elements (R-G-B) is 2⁸ or 256. But computer programmers always begin counting from zero (or as we like to say mnemonically: All good programmers start with nothing). Thus the range of register values actually runs from 0 to 255. 255 in hexadecimal is FF (15 sixteens plus 15 ones). Theoretically a Web color can be specificed by any triplet of values from 00-00-00, where R, G, and B are all kept flat, producing black, to FF-FF-FF, where all three settings are at full blast, producing white.

However, that's just the theory...

3.2.3 · 6x6x6, the Palette of the Beast

If you're feeling fanciful you can use many interesting values to invoke Web colors:

A11EEE 666999 BA0BAB

In the early days of the Web, however, choosing one's colors thus poetically could produce unintended consequences. Though the browser would cheerfully pass along our selections, what showed up on users' screens was often something totally unexpected. This was because personal computers before the turn of the century often came with graphics cards that did not allot the full 24 bits to each pixel. They could not display all 16-million-plus colors, but only 65,536 (16-bit color) or horrible to contemplate, 256 (8-bit color).

Those bad old days are long gone as far as the desktop is concerned, though with the proliferation of Web-enabled appliances, such as cellphones and game platforms, it's still possible to find displays that afford less than 24 bit color.

Some day soon this will no longer be the case, but we're not there yet. As recently as the end of 2007, some of us were working on a platform (the Nintendo Wii system) whose video chip supported only 16 bit color.

So, as we'll explain in the next section, you still need to know how to deal with color constraints if you want to design for the Web.

When a browser encounters a color its graphics card cannot display, it either shifts the color to the nearest supported value, or it dithers the color by creating a pattern of alternating pixels. This can get pretty ugly.

To deal with the problem, Web designers employed a reduced subset of the full 24-bit palette. These color choices came to be known as Web-safe colors. Such colors were guaranteed to display without shifts or dithering on any computer with at least 8-bit color support. Above left, behold the Palette of the Beast.

At right is another view of the 216 kosher colors, this time in an exploded-cube arrangment:

In theory 8-bit color produces 256 possiblities; but the Web-safe palette actually contains only 216 options. This is because Netscape and Microsoft, makers of the two most popular browser programs in the early days, reserved 40 colors for exclusive use in interface elements such as window borders and icons.

In terms of hexadecimal coding, the 216 Web-safe colors all have this in common: each element in their R-G-B sequence uses one of the six values shown in the table below:

Hexadecimal
00	33	66	99	CC	FF
Decimal
00	51	102	153	204	255

So of the following, only the codes in red represent Web-safe colors. The others are impostors:

FF0000

339966

CC33FF

000033

3.3 | BACKGROUND GRAPHICS

Back in 1995 the controversial "Netscape enhancements" to HTML gave authors the ability to build background patterns by filling the screen with multiple adjacent copies or tiles of a given image. This is very much like the digital "wallpaper" you can set up in Windows and MacOS. Here is a (rather frightening) sample page.

3.3.1· The BACKGROUND Attribute

To establish a tiled background, insert a BACKGROUND attribute into the initial BODY tag; the value of the attribute will be the electronic address (URL) of the desired image file. This may be either a fully-qualified URL or (more commonly and sensibly) a relative reference to a graphic within your own system. The graphic in question may be either in JPEG or GIF format (for more about these formats, see below). More recent browsers even support animated GIFs for tiled backgrounds.

Be careful not to confuse BACKGROUND with BGCOLOR. BACKGROUND is for tiled, graphical backgrounds, BGCOLOR for solid colors.

Note that you may use both a BACKGROUND and a BGCOLOR attribute in your BODY tag. Your users will see the solid color, probably only briefly, as the tiled images load.

3.3.2· A Good Idea at the Time?

Graphical backgrounds were meant to impart a pseudo-textured look to Web pages... which they do... but it's notoriously difficult to read words against all but the most carefully designed textures. Intrusive or awkwardly tiled background graphics are a sure giveaway of amateur Web design. Most professional opt for conservative, solid-color backgrounds--and while no one is eager to resurrect the "gunmetal gray" that was the default background at the dawn of the Web, most pages wear black or white these days.

3.3.3· Advanced Use of Background Images

Nonetheless, some people still use background graphics in their pages. Instead of crude wallpaper tiling, these designers use more advanced techniques. Here are two of the more common:

One large image as page template


Background image and page from Sean Cohen's Web site, ca. 1998.

As you can see in this example, some designers use a single large graphic to lay in a system of rules and borderlines to give visual structure to pages with standard formats. Particular page content is then laid on within a table structure (see Part 4) so that it aligns properly with elements of the background. The background image in this case is not meant to tile, so it is given dimensions large enough to fill the screen on one iteration: 1200 pixels in width and 1000 pixels in height.

Using a background strip to create a marginal column
This technique does use tiling, but only in the vertical dimension. The designer creates a graphic that is not very high (1-5 pixels) but is very wide (1200 pixels or more). When laid in as a tiling background, this image creates a column of distinct width and indefinite height (since the image will tile as many times as needed to match the extent of the page). Here's an example:

Background graphic for 1999
Communications Design Web site
(border added) Page from
Communications Design site
(border added)

Content such as navigation buttons can be laid over this column. The color can be varied to indicate departments. Patterns or designs can be substituted for the simple solid block.

The examples above are nearly a decade old (egad), but while advancing technology has made many of the techniques discussed here seem pretty quaint, background graphics are still important. As you'll see when we come to Stylesheets, there are more contemporary ways to deploy them, but the basic principles behind the examples above remain useful.

3.4 | IN-LINE GRAPHICS

Background graphics are close cousins to a more common form of Web image: in-line graphics. These are images that appear only once at a given location, integrated into the flow of words and other page elements.

3.4.1· The <IMG /> Tag

In-line graphics are controlled by a single tag: <IMG /> or the image tag. IMG is another of the rare solitary features in HTML: it occurs not as a container but always solo. That's why the tag closes with a space and a slash under the XHTML regime.


	<IMG SRC="images/flame.jpg"
	 WIDTH="650" HEIGHT="584" ALT="Apophysis flame simulation" />

The IMG tag in action

The tag that introduces the image contains several critical parts. (If you look at the source for this page, you'll see that the actual tag is more complicated than the example given above; we'll defer these extras for the moment and dwell on the bare essentials.) The four attributes discussed below -- SRC, WIDTH, HEIGHT, and ALT -- should be considered indispensable. All image tags must have them. We'll go on to discuss some other attributes which are technically optional, though they may be required in certain circumstances.

SRC

SRC (for source) holds the URL or relative file location for the image file. In this case the string "image/" indicates that the file in question resides in a subdirectory with that name. The ".jpg" extension identifies this file as an image in Joint Photographic Expert Group or JPEG format (see the next section).

WIDTH and HEIGHT

These attributes fix the dimensions of the image. They can be altered proportionally to scale the image, though in practice you probably won't do this very often. Bitmap or raster images (JPG and GIF) become distorted or pixelated when scaled up, and though they'll look fine when scaled down, it makes more sense to scale down the source image since that will decrease the bit size of the graphic.

It's essential to specify WIDTH, and good practice also to specify HEIGHT for your graphics. If dimensions are given, browsers assign a rectangle for the image and continue laying out your page (i.e., displaying text) even if the image file has not been completely transferred from the server. Even in these days of broadband, we still encounter graphics-heavy pages that load gradually. This trick is impossible without the WIDTH specification.

ALT

ALT is short for alternative. The value of this attribute is a string that is displayed or delivered in place of the image in the following cases:

The user has left the mouse over the image for a second or two;

The image has failed to load or is streaming in slowly;

The user has turned image loading off;

The user is blind or visually impaired and is having the Web page read aloud by a text-to-speech converter.

You must include a useful ALT string with every image. Make ALT text clear and descriptive. If you need to include more than a few words, you may use the LONGDESC attribute instead of ALT. This attribute was designed to accommodate visually impaired Web users, which is mandated by U.S. law and by legal codes in many other countries as well.

3.4.2 · The ALIGN Attribute

The ALIGN attribute in the IMG tag sets the relationship of the image to the text stream in which it is located. In the earliest version of HTML there were three ways to align in-line graphics:

Top

Middle

Bottom

E/Street Button Netscape added two more possibilities in the first wave of "enhancements" that led up to HTML 3.2: ALIGN="LEFT" sets the graphic to the left of the text and causes text to flow around it irrespective of breaks: as you see here. ALIGN="RIGHT" positions the graphic on the right. In both cases text flows around the aligned graphic, which proves very convenient for design effects like decorative capitals and call-outs.

3.4.3 · VSPACE, HSPACE, and an alternative

These attributes allow you to create a gutter, specified in pixels, between the image and what lies on either side of it, whether that be text or the page margin. These attributes are obviously useful in coordinating images with words. the inset graphic showing the white letter E, in the section above, uses the attributes.

the image shown at left does not, however, and if you look closely, you'll see an important difference between it and the inset letter above.

HSPACE and VSPACE impose the gutter symmetrically, on both sides of the graphic, making it impossible to set a hard right or left margin.

Fortunately, Cascading Stylesheets (CSS) afford a good solution to this problem. We simply create a document division, using the <DIV></DIV> container, with an in-line stylesheet that handles both text flow (float) and a one-side-only gutter (padding). Here's how we handled the image above left:

<div style="float: left; padding-right: 30;">
<img src="images/reuben.jpg" width="200" alt="Painting by Reuben Moulthrop" />
</div>

3.4.4 · The BORDER Attribute

Notice the thick black borders around the image at right. These were set by adding a BORDER attribute to the IMG tag. This attribute specifies a border size given in pixels.

If no BORDER attribute is set, then no border will appear if the image is treated simply as an in-line graphic. However, if the image is used as a link cue (see Section 3.7 below) then a visible border will appear even if none has been specified. If you want to suppress the border on a graphic link cue, you must include the attribute BORDER="0".

The color of the border is variable. If your image is not a link cue, then the border color is the same as the body text color set for your page (black by default). In the case of a graphical cue, the color will be the one assigned either to unvisited links (blue by default) or visited links (purple by default). The border will turn to the active link color when the user holds the mouse button down over the graphic.

3.4.5 · The NAME Attribute

The attribute NAME may be used in IMG tags. It is advisable if you want to use JavaScript to change the source assignment of the image, a technique used in roll-over effects (see Part 8). This attribute is not required if you are using images simply for display purposes or as link cues. For the moment you should register two facts about NAME:

NAME is not the same as ALT. The value of NAME is not displayed in any way.

NAME is a more or less arbitrary designation for a rectangular space on the screen, not for the image that occupies that rectangle. I may have a 300x200 rectangle showing an image of a puppy, but on rollover that image might change to a goldfish. An appropriate NAME value would be "pets," not "puppy"; but since nobody sees the NAME value, I could set it to "foo" or "zardoz" if I want.

3.4.6 · Formats for In-Line Graphics

If you've worked mainly in print up to now, the shift to Web graphics may be a bit disconcerting. To begin with, most of the image formats with which you're probably familiar -- TIFF, EPS, BMP -- aren't supported in the HTML specification. This is particularly true of vector formats (discussed below).

Also, all Web graphics display at 72 pixels (or dots) per inch--72 dpi. If you have a massive, 600 dpi pre-print TIFF, you could indeed convert it to a massive, 600 dpi JPEG and try to feed it through the Internet. And it might look subtly better than the equivalent 72 dpi graphic... when all its bits finally arrive... nine days in the future.

Mostly you will need to forget what you know about print graphics. The Web is different. Printhead beware.

Generally speaking, Web browsers are designed to support one type of digital image: a bitmap or raster graphic which is essentially a table of numbers holding a value for each tiny color dot that makes up the image. All browsers support at least two bitmap formats:

Graphics Interchange Format (GIF): Introduced by Compuserve in 1987, this format is fairly primitive but nearly universal. It's to Internet graphics what the carburetor was to car engines--a crude but reliable solution. If neither "Compuserve" nor "carburetor" mean anything to you, then perhaps you grasp the point: GIF is a legacy format.; To be sure, GIF still has its uses. It was until recently the only reliable way to add transparency to Web images and the only format that allowed animation without an additional browser plug-in. Neither of these claims is strictly true anymore, but many designers still rely on GIF.
Joint Photographic Expert Group Format (JPEG): Because it includes a powerful mechanism for excluding redundant information (i.e., compression), JPEG produces better file economy on large or complex images, and JPEGs often have better fidelity. Most important, JPEGs can use the full range of color available to your system; GIFs require a limited or "indexed" color palette. JPEG is the better choice for complex imagery and photography.; In the old days, JPEG images could not be used for some purposes (e.g., as background graphics) but that changed a long while ago. If your images don't need to have super-small file sizes, you can probably use JPEG exclusively for non-animated graphics.

The practical difference between GIF and JPEG images should be apparent in the following example, unless your system has very limited display capabilities. Look closely at the solid-color regions, especially the darker bits:


JPEG	GIF

Being bitmaps, both images contain the same number of pixels; but the JPEG graphic (left) has a larger color palette than the GIF graphic (right). That's why the GIF seems so fuzzy. Many of its pixels are not quite the right color, a direct result of indexed color (in this case, the Web-safe palette). GIFs are perfectly fine for simpler graphics or line art, though; and in the case of compact, simple graphics, GIF files are often smaller than JPEGs. The GIF file here is 38.7 kilobytes; the JPEG comes in at 58.4 -- about a 30% variation.

3.4.7 · GIF89a Transparency


No Transparency	Transparency

Photoshop has had the ability to save GIF files with transparency since version 4.0. Other major graphics programs do the same. Many graphics programs and Web browsers now also support transparency for JPEG and Portable Network Graphics or PNG (to which we're coming).

3.4.8 · Vector Formats

Bitmaps are not the only way to encode digital images. Since those bright folks in Silicon Valley invented Postscript, it's been possible to control digital images in a much more powerful and flexible way--not as mosaics of tiny dots, but as curves whose angles and dimensions are specified by elegant mathematical equations. Images defined in this way are called vector graphics.

Vector graphics have enormous advantages over bitmaps: they can usually be expressed with far fewer symbols (a few kilobytes as compared to a few hundred for a bitmap) and they can be flexibly scaled without loss of fidelity. But bitmapped images just keep hanging on. They're crude, but there's basically one way to handle them and no one has much proprietary stake in the method anymore. Meanwhile several companies offer competing vector graphics standards and there is still no clear winner.

The most popular formats for vector graphics today include Encapsulated Postscript (EPS), Portable Document Format (PDF), and for vector-enabled media files, Macromedia Flash. All of these formats require a plug-in in order to be interpreted by major browsers. Only Flash has made really significant inroads, appearing on 80-90% of browsers.

3.4.9 · Color Modes

Adobe Photoshop and other modern image-processing programs let you specify a color mode for graphics in various formats, including JPEG. In the current version of Photoshop (10, or CS3), your options include Bitmap, Grayscale, Duotone, Indexed Color, RGB Color, CMYK Color, Lab Color, and Multichannel.

When producing a JPEG graphic for the Web, always choose RGB Color. DO NOT USE CMYK COLOR. CMYK (which stands for "Cyan, Magenta, Yellow, and Key") is also known as "process color," and the process in question is PRINTING, not the rendering of on-line graphics.

Most browsers, including Internet Explorer and Firefox for Windows, will not display JPEG images encoded in CMYK Color mode. Some browsers running in MacOS will display these graphics -- so beware! Web designers who work on Macintosh systems, and do not check their pages on Windows systems, risk producing JPEGs that most of the world cannot see.

Since invisible graphics are hard to sell, they also risk losing contracts and jobs.

The color mode problem can be subtle and hard to catch. When Web graphics fail to load, the problem usually lies either in code, placement of the graphics file in the file system, or both. However, if you're sure your JPEG is in the right place, and you're reasonably sure the <IMG> element is correctly written, then do the following.

First, open a Windows browser, either on a non-Macintosh system, or in some kind of dual-boot arrangement. Next, navigate directly to the graphic. That is, type in a path that leads to the JPEG file, not the Web page meant to contain it. Doing this rules out code problems in the page.

If the graphic does not appear, or you see a broken-graphic icon, then you may have problems with color mode. Open your JPEG in Photoshop and check the mode. If it's CMYK or some other problematic type, set it back to RGB Color. Save the change, upload the new version, and everything should be fine.

This problem should not occur with GIF files, since graphics of this type can only be saved using modes like Duotone, Grayscale, and Indexed Color, all of which work in any browser.

3.5 | ANIMATED GRAPHICS

Since the very early days (Netscape 1.1), Web browsers have been capable of displaying multiple image sequences combined into a single animated GIF file. This capacity for combination and playback is another part of the GIF89a standard, which was well ahead of its time.

Animated GIFs require no special HTML mechanism--they are marked up as if they were ordinary, static GIF files and they have the same file extension (.gif) as their more sedate cousins.

Animated GIFs can be created easily enough within most major graphics programs (in Photoshop, for instance, by converting a series of layers into animation frames). Most Web designers turn to Adobe's Flash or AfterEffects to produce animations.

Once you build an animation in Flash you can also convert its bitmap contents to vector graphics and save the whole production in Flash's vector format. This reduces file size massively. It can be hard to decide between Flash format and animated GIF. Often it's the more sophisticated features of Flash -- clickable interactivity and scripting capabilities -- that decide the issue.

To see how an animated graphic can be created out of simple components, see this anatomy of an animated GIF.

3.6 | USING GRAPHICS WISELY

3.6.1· Controlling Bitload

Perhaps the most common complaint about Web pages involves agonizingly slow load times. In the old days, people used to call this the World Wide Wait.

Digital Subscriber Lines (DSL), Cable, and other forms of broadband have reduced this problem in many cases, but at the same time, uses of the Web and the Internet have increasingly shifted to video, gaming, and other bit-intensive applications.

Remember, anything you put on the Web can be accessed by hundreds of millions of people. If even a small fraction of that number all decide to load your page at the same time, you'll put serious stress on your systems. Even with increasingly powerful technology, we still need to worry about load.

3.6.2· Single-Pixel Effects

the tricks described in this section exemplify graphical stinginess -- they use tiny, one-pixel files, scaled and arranged for various purposes. Alas, many of these tricks (e.g., the vertical rule) have been rendered obsolete by CSS. Still, you might pick up some useful insights by reading about them.

There's no such thing as a vertical rule in HTML, yet you'll often see the need for a solid line of color running either up or across your page. The simplest way to create such an element involves the smallest of graphics files--a single dot or pixel of a certain color (preferably one of the Web-safe 216). Using the HEIGHT and WIDTH attributes of the IMG tag, you can scale this infinitesimal square (which is what all pixels are) to any size you like.

By varying one dimension more than the other, you can distort the square dimensions of the native dot so that it becomes some sort of rectangle, i.e., a line of varying width. The red line at left was produced by distorting a 1-pixel image of the color #CC6600 so that it is 3 pixels wide and 450 high.

The single-pixel effect is not only quite versatile (there are plenty of other things you can do besides drawing lines) but also enormously efficient. Mono-dot graphics files are very small indeed--often only a few hundred bytes (i.e., less than 1k) and since the file must only be loaded once, pages built with one-pixel effects work are very friendly to users with slow or sporadic connections (for instance, in the mobile communications sphere).

3.6.3· Thumbnails

Click to view a larger version
(300x300 pixels, 60k)

Suppose you have an image that just can't be reduced. Here's a sensible compromise--put a thumbnail version of the image on your page, as in the example at right:

Create a link from the thumbnail to a separate page containing the full-size graphic. Add a caption or other information indicating the dimensions of the larger image and (possibly) how big the file will be. In terms of the size limitations we proposed above, only the thumbnail graphic counts. Since you've warned users about the large size of the full-format graphic, you could plausibly argue that it is exempt from the 150k rule.

3.7 | IMAGES AS LINK CUES

As we've just seen in the thumbnail example above, images on Web pages are rarely just decorative or illustrative. Like words, they too can be cues for departing and arrving links:

The markup for the example at left looks like this:


	<A HREF="key_myst.htm"><IMG SRC="images/key.gif" /></A>

Note that the IMG tag is contained within the anchor container, taking the place of the words in a vebal link. As we explained with respect to the BORDER attribute above, making a graphic into an active cue can cause a border to appear even if you have not specified a border width. In some cases you may want the border to be visible, either to signal that this graphic is indeed a cue, or to register information about whether the arrival page has been visited. If you don't want to invoke these features, set an attribute of BORDER="0" in the IMG tag.

END OF PART 3

Index · Part 1 · Part 2 · Part 4 · Part 5 · Part 6 · Part 7 · Part 8 · Part 9 · Top


Background graphic for 1999 Communications Design Web site (border added)	Page from Communications Design site (border added)