Understanding color theory
Choosing the best image format
Avoiding common mistakes
Working with images in XHTML
Using alt text to improve accessibility
Using CSS when working with images
Displaying a random image from a selection

Introduction

Although text makes up the bulk of the Web’s content, it’s inevitable that you’ll end up working with images at some point—that is, unless you favor terribly basic websites akin to those last seen in 1995. Images are rife online, comprising the bulk of interfaces, the navigation of millions of sites, and a considerable amount of actual content, too. As the Web continues to barge its way into every facet of life, this trend can only continue; visitors to sites now expect a certain amount of visual interest, just as readers of a magazine expect illustrations or photographs.

Like anything else, use and misuse of images can make or break a website—so, like elsewhere in this book, this chapter covers more than the essentials of working with HTML and CSS. Along with providing an overview of color theory, I’ve compiled a brief list of common mistakes that people make when working with images for the Web—after all, even the most dedicated web designers pick up bad habits without realizing it. Finally, at the end of the chapter, I’ll introduce your first piece of JavaScript, providing you with a handy cut-out-and-keep script to randomize images on a web page.

Color theory

Color plays a massively important role in any field of design, and web design is no exception. Therefore, it seems appropriate to include in this chapter a brief primer on color theory and working with colors on the Web.

Color wheels

Circular color diagrams—commonly referred to as color wheels—were invented by Newton and remain a common starting point for creative types wanting to understand the relationship between colors and also for creating color schemes. On any standard color wheel, the three primary colors are each placed one-third of the way around the wheel, with secondary colors equally spaced between them—secondary colors being a mix of two primary colors. Between secondary and primary colors are tertiary colors, the result of mixing primary and secondary colors. Some color wheels blend the colors together, creating a continuous shift from one color to another, while others have rather more defined blocks of color; however, in all cases, the positioning is the same.

Additive and subtractive color systems

Onscreen colors use what’s referred to as an additive system, which is the color system used by light—where black is the absence of color, and colored light is added together to create color mixes. The additive primaries are red, green, and blue (hence the commonly heard RGB when referring to definition of screen colors). Mix equal amounts of red, green, and blue light and you end up with white; mix secondaries from the primaries and you end up with magenta, yellow, and cyan.

In print, a subtractive system is used, similar to that used in the natural world. This works by absorbing colors before they reach the eye—if an object reflects all light it appears white, and if it absorbs all light, it appears black. Inks for print are transparent, acting as filters to enable light to pass through, reflect off the print base (such as paper), and produce unabsorbed light. Typically, the print process uses cyan, magenta, and yellow as primaries, along with a key color—black—since equal combination of three print inks tends to produce a muddy color rather than the black that it should produce in theory.

Although the technology within computers works via an additive system to display colors, digital-based designers still tend to work with subtractive palettes when working on designs (using red, yellow, and blue primaries), because that results in natural color combinations and palettes.

Creating a color scheme using a color wheel

Even if you have a great eye for color and can instinctively create great schemes for websites, it pays to have a color wheel handy. These days, you don’t have to rely on reproductions in books or hastily created painted paper wheels. There are now digital color wheels that enable you to experiment with schemes, including Color Consultant Pro for the Mac (www.code-line.com/software/colorconsultantpro.html), shown in the following screenshot, and Color Wheel Pro (www.color-wheel-pro.com) and ColorImpact (www.tigercolor.com/Default.htm), both for Windows.

When working on color schemes and creating a palette for a website, there are various schemes available for you. The simplest is a monochromatic scheme, which involves variations in the saturation (effectively the intensity or strength) of a single hue. Such schemes can be soothing—notably when based on green or blue—but also have a tendency to be bland, unless used with striking design and black and white. A slightly richer scheme can be created by using colors adjacent on the color wheel—this is referred to as an analogous scheme, and is also typically considered harmonious and pleasing to the eye.

For more impact, a complementary scheme can be used, which uses colors on opposite sides of the color wheel (such as red/green, orange/blue, and yellow/purple); this scheme is often seen in art, such as a pointillist using orange dots in areas of blue to add depth. Complementary schemes work well due to a subconscious desire for visual harmony—an equal mix of complementary colors results in a neutral gray. Such effects are apparent in human color vision: if you look at a solid plane of color, you’ll see its complementary color when you close your eyes.

A problem with a straight complementary scheme is that overuse of its colors can result in garish, tense design. A subtler but still attention-grabbing scheme can be created by using a color and the hues adjacent to the complementary color. This kind of scheme (which happens to be the one shown in the previous screenshot) is referred to as splitcomplementary.

Another scheme that offers impact—and one often favored by artists—is the triadic scheme, which essentially works with primary colors or shifted primaries—that is, colors equally spaced around the color wheel. The scheme provides plenty of visual contrast and, when used with care, can result in a balanced, harmonious result.

How colors “feel” also plays a part in how someone reacts to them—for example, people often talk of “warm” and “cool” colors. Traditionally, cooler colors are said to be passive, blending into backgrounds, while warmer colors are cheerier and welcoming. However, complexity is added by color intensity—a strong blue will appear more prominent than a pale orange. A color’s temperature is also relative, largely defined by what is placed around it. On its own, green is cool, yet it becomes warm when surrounded by blues and purples.

Against black and white, a color’s appearance can also vary. Against white, yellow appears warm, but against black, yellow has an aggressive brilliance. However, blue appears dark on white, but luminescent on black.

The human condition also adds a further wrench in the works. Many colors have cultural significance, whether from language (cowardly yellow) or advertising and branding. One person may consider a color one thing (green equals fresh), and another may have different ideas entirely (green equals moldy). There’s also the problem of color blindness, which affects a significant (although primarily male) portion of the population, meaning you should never rely entirely on color to get a message across. Ultimately, stick to the following rules, and you’ll likely have some luck when working on color schemes:

Work with a color wheel, and be mindful of how different schemes work.
Use tints and shades of a hue, but generally avoid entirely monochromatic
schemes—inject an adjacent color for added interest.
Create contrast by adding a complementary color.
Keep saturation levels and value levels the same throughout the scheme (a color’s value increases the closer it is to white).
Keep things simple—using too many colors results in garish schemes.
Don’t rely on color to get a message across—if in doubt about the effects of color blindness, test your design with a color blindness simulator application such as Color Oracle (http://colororacle.cartography.ch/).
Go with your gut reaction—feelings play an important part when creating color schemes. What feels right is often a good starting point.