Graphics & Color on the Web

One of the biggest benefits of the World Wide Web is its ability to use graphics and color to convey a message. Unfortunately, one of the biggest liabilities of World-Wide Web designers is their inability to use graphics and color to convey a message.

Graphics and color can play a big role in the ability of a Web designer to get the point across to users viewing a Web site... or not.

A picture may be worth a thousand words, but on the Web this can actually be more like ten thousand seconds. Graphics take up a lot of space on a Web page and add significantly to the download time. A high-quality graphic will take a great deal more time to download than a thousand words.

Although graphics and color are commonplace on most Web sites, the decision to use them is not to be taken lightly. There are many factors to consider when deciding to use graphics and color in a Web site.

        Monitor display: some monitors only display 256 colors

        Cell phones: more and more Web browsing is being done on cell phones. Screen type, size and quality, and the cost of downloading graphics, take on a whole new meaning when you're looking at cell phones.

        Bandwidth: with a slow connection, graphics take longer

        Your Message: Will a graphic help your message or detract from it?

        Cost: Can you use free graphics or will you have to purchase them?

        User behavior: computer monitors only have 72 dots per inch. If your users aren't expected to print out the images, a low-resolution 72 dots-per-inch (dpi) image will look the same on the screen as a high-resolution 600 dpi image. Of course, it'll look awful if anyone prints it. 150 dpi is a safer bet for low-res; 300 dpi for medium-res.

        GIF or JPEG or PNG: What graphic format should you use?

GIF or JPEG or PNG

A GIF or Graphic Interchange Format was first type of graphic file on the Internet. It remains among the most popular, universally supported by all Web browsers. Although any image can be saved as a GIF, this format is generally used for images with areas of "flat color" or a limited number of colors. This primarily means line drawings like logos, illustrations, or any drawing generated by computer or hand.

GIFs give a Web designer a variety of options when it comes to controlling color and size. GIFs can also be used with animation. These Animated GIFs are small, fun and easy to incorporate into a document.

Unfortunately, the Unisys Corporation holds a patent on GIF technology, and has threatened to start enforcing it. This could mean everyone using gifs on their Websites would owe Unisys a royalty for every image. Expect to see PNGs used instead of GIFs before that would happen.

A JPEG, JPG or Joint Photographic Experts Group file is the other most common graphic file on the Internet, supported by most browsers 2.0 or above. JPEGs are generally used for photographic images. JPEGs give the Web developer control over file size thorough compression. However, when a JPEG file is compressed it loses some of the photograph's quality.

PNG or Portable Network Graphics is a newer graphics format similar to the GIF. PNG offers a host of impressive features including compression, transparency and the ability to store text, such as copyright information, along with the graphic. PNG has been officially recommended by the W3C, but support for this new format is limited to newer browsers.

Graphics Software

There are many different types of software available for creating GIFs and manipulating JPEGs. Many of these software programs could put a sizable dent in your wallet--several hundred dollars' worth of dent, even with an academic discount. However for the professional, purchasing an industry standard such as Adobe Photoshop or Adobe Illustrator is well worth the money.

For thrifty beginners Paint Shop Pro or Macromedia Fireworks are fine software programs that  give you many of the features of their more expensive cousins at a very affordable price (around $100 for students).

For really thrifty beginners free software is the only way to go. Okay, although almost nothing is free (except the GIMP, see below), many software companies offer free trials of their software over the Internet. These software trials generally last only 30 days but can help give you good exposure to the a particular software. There are also many freeware or shareware programs that allow one to manipulate images.  These programs are generally well under $50.

Sources for Software

The GIMP (GNU Image Manipulation Program: a full-featured open-source program released for free under GNU General Public License (GPL).) Both Windows and Linux/Unix versions exist, as does a MacOS X version. It's definitely the most powerful of the lot, closer to Photoshop than to anything else.
http://www.gimp.org/

Graphic Converter is a Macintosh program, available from http://www.lemkesoft.com/en/. It's shareware, free to download and fully-functional; registration gets rid of the nag screen.

Makeup is a free Windows program that can compress a JPEG and make the file smaller while retaining acceptable quality in the image. It can also chantge the brightness, contrast and sharpness of the image, and rotate the image. It's available from a personal Website at http://www.trans4mind.com/personal_development/convertImage/helpFile.htm.

Paint Shop Pro 
http://www.jasc.com/

Adobe
http://www.adobe.com

Macromedia
http://www.macromedia.com

Shareware.com
http://www.shareware.com

Dithering, Web Safe Color and other cool terms.

Real life has the potential for a limitless amount of colors and tones. When you take an image of something from real life to an 8-bit monitor that can only display 256 colors, some of the quality will be lost.  On the World Wide Web, only 216 colors are recognized universally by all browsers.  These 216 colors are known as the Web-safe color palette.

Web Safe Color

Older computers are still operating on a 256 color system.  In this 256 color system, most browsers share a common palette of colors made up of  216 colors.  Because these 216 colors are common  across different platforms, browsers and operating systems, if you stay within this color range, your color selection will be universally honored.

Here is a nice example from Lynda Weinman of what happens when you use limited-color gifs where you really ought to be using jpgs
http://www.lynda.com/products/books/dwg/dithering.html

Web Safe Color Palette from Lynda Weinman
http://www.lynda.com/hexh.html

When displaying graphics on the web, you can choose to have an image displayed with only these 216 Web safe colors. Although this may result in a loss of quality you can be sure that the image can be viewed universally.

How important is this? Everyone's got at least a Super VGA monitor now, right? Depends on your target audience. Are you making a Website for people overseas, or low-income people here in the US? Think about all those obsolete computers given away as tax writeoffs: that's where they wind up. Keep your target users in mind whenever you make color choices.

Dithering

The easiest way to reduce the infinite color of a photograph or image to 216 Web safe colors is using a process known as dithering. Dithering is simply taking pixels of two colors and moving them around to create the illusion that they are a third color. The best everyday example of this is type of image displayed in black and white. When your browser encounters an image with colors not in the 216 Web Safe colors, it dithers two or more of the Web safe colors to display the color on the image, hence affecting image quality.

Open this Flash file to see the effect of dithering on an image when you change the color depth (number of colors).

RGB Color

The RGB system uses a series of three numbers to represent the intensity of Red, Green and Blue.  With 24 bit color these numbers will range between 0-255.  The RGB values found in the Web safe color palette will always be some combination of 0, 51, 102, 153, 204, 255.  You will most likely come into contact with this RGB color if you use Photoshop, other graphics programs or a Web page editor.


Hexadecimal Color

In order to specify colors in your HTML files, you will need to use Hexadecimal value for a color.  Hexadecimal are the numeric values of the RGB.  The colors are represented by three pairs of digits.  Each pair represents the RGB values.  In the Web safe palette Hexadecimal numbers are always represented by combinations of 00, 33, 66, 99, cc, ff.

Example

Graphical Images on the World Wide Web

Images on the Web can be easily (though not necessarily legally) saved to disk by clicking on them with the right-hand mouse button.  (That's apple-click on a Mac.) Once saved, images can be inserted into Web page using HTML. Save images locally; don't simply use the URL of where the image is located. You can control an image you've saved locally; an image on another server may be altered or removed, or the file name changed, without your knowledge.

The tag used in HTML for inserting an image is <img src ="whateverfile.gif" / >. This tag is stand-alone and does not need a separate closing tag, because it does not format text, but rather inserts something into the page much like a <hr / > tag.   The <img / > tag has many attributes, but the most common is src="url".

<IMG / > Tag and common attributes

<img src="url" />

defines url of file to be placed (replace the letters "url" with the name and location of the file in question)

<img src="url" align="value" />

allows one to control how image will be displayed in relation to text. Value will be the selected alignment (left, right)

Note: this is in relation to text.. If you want to center an image on the page, use the ALIGN attribute of a DIV or P container with the image inside it:

<p align="center"><img src ="url" /></p>

<img src ="url" alt="text" />

displays alternative text when the image is not displayed. Useful for text only browsers, such as Lynx. Essential for text-reading software utilized by visually impaired users. Some browsers will also display this text when one points to the image. Use is required for this class. Anything turned in to me without alt attributes and values in the image tags automatically loses 10% of the grade.

Want to experience the Web without images? There's a Lynx emulator at http://www.delorie.com/web/lynxview.html

<img src ="url" border="number of pixels" />

displays a border around the image, thickness is set by the number of pixels. For hyperlinked images (just put an <img> tag inside an <a href...>...</a> container), use border="0" to keep a blue border from appearing around the image:

<a href="next.html"><img src="go.gif" alt="go" width="50" height="50" border="0" /></a>

<img src="url" width="number of pixels" />

specifies width of the image in pixels
not required for HTML, but required for this class--speeds up display of image.

<img src="url" height="number of pixels" />

specifies height of the image in pixels
not required for HTML, but required for this class--speeds up display of image

Pay attention to that "required for this class". Anything turned in to me without width and height attributes and values in the image tags automatically loses 10% of the grade. So, if you want to lose 20% of your grade off the top, leave off the alt, width, and height, and you can just watch your grade go from an A to a C.

<img src="url" hspace="number of pixels" / >

specifies how many pixels of space you want on both sides of the image

<img src="url" vspace="number of pixels" />

specifies how many pixels of space you want above and below the image

 

Example:

<img src="myphoto.jpg" width="150" height="200" alt="This picture of me at the beach was taken in 2003." vspace="10" hspace="15" border="2" align="right" />

HTML

What it does

img

Tells the browser to put an image here.

src="myphoto.jpg"

Uses a file called myphoto.jpg as the image.

width="150" height="200"

Tells the browser to set aside a space 150 pixels wide and 200 pixels tall, into which this image can be loaded. Now the browser can continue loading the rest of the page while it's waiting to bring in the image from the Web server.

alt="This picture of me at the beach was taken in 2003."

If you can't see the image, this text shows up instead.

vspace="10" hspace="15"

Puts a 10-pixel margin above and below the image, and a 15-pixel margin on both sides of it.

border="2"

Puts a 2-pixel border line around the image.

align="right"

Puts the image on the right side of the page, and aligns any text in the area to the left of the image.

 

Finding Images

There are many different ways to find images on the Internet. Google,   AltaVista and Lycos are among the many search engines that offer a special option to search for images.

Stock photography--professional photography cataloged by subject and available for your  use--can be found for a nominal fee at many places on the Internet.  Companies such as  Corbis and PhotoDisc offer reasonably priced stock photography for use on the World Wide Web, and istockphoto.com offers downright cheap stock photos. I suggest you avoid the Microsoft clip art that comes with Powerpoint; we've all seen it. A lot. Powerpoint poisoning is a tragic thing.

Wherever you get your clip art or photographs, make sure that you have permission to place them on your Web page.  Without permission you're probably either breaking a copyright agreement or stealing.

Creative Commons
http://www.creativecopyright.org
This nonprofit site offers flexible copyright for creative work. It also has a great section on interesting ways to cite credit for copyrighted information.

Clip Art.com
http://www.clipart.com 
Lots of loud or cheesy graphics can obscure your message and annoy your audience, but adding reasonable clip art  to a document can be a great way to practice the <img> tag. Adding unreasonable clip art can be a nice touch for your bad html project for this class. Most of the clip art available at clipart.com is free. Try adding some animated gifs.

Media Builder
http://www.mediabuilder.com/  Do you want to make a cool animated banner? Don' have a graphics editor but need to crop a photo? Do you want to make your own buttons? Media Builder allows you to do all of these things and a lot more. The best part is it's all free, if you can tune out all the ads. For an example, check out the skittish graphic below:

Sites to think about

How do the sites below handle graphics? Are they used effectively?

Site One: TidyCats

Site Two: Kodak

Site Three: Corbis

Please post your thoughts in the "Graphics" forum under Communications/Discussion Board.

 

Assignment: Inserting Graphics into HTML Documents

This assignment is to be turned in on the ftp site. Module six explains more about FTP, and includes specifics for getting your files onto the student server. The page marked Graphics Assignment URL turn-in (in Module 5) contains three fields where you can type the URLs to the Web pages you create for this assignment.

Part one:

For this portion of the project, you'll build three more xhtml screens and add to the bio page you built at the end of module four (see the summary information from module four for details on what goes here). You'll have four screens that are biographical in nature. The screens should have consistent navigation, all should link to each other and include the following additional features.

        Consistent type, colors and navigation *

        Headline and subhead per screen

        One graphic per screen

        Email link to yourself on every screen

        Slightly different layout on all screens

        Three links to external web sites

  • Run a validation report for all the pages. If the page checks out okay, include the code they supply to show that the page checked out okay. If it gives you an error message you can't figure out, include a link from each page in question to a page into which you've copied the text of the validation report.

*Add a linked css file and edit all of your xhtml documents to include links to the css file. Use this css file to create the color and font effects that are consistent on all the pages. You should also add samples of at least two css properties, such as letter-spacing or line-height. Check the book or one of the CSS links on this Website if you'd like to browse through some CSS options to include.

Parts two and three

For the assignment below, look carefully at the picture of each Web page and, using the HTML you have learned in class*, recreate the picture as a Web page with valid HTML. For each picture, you will be given links to the graphics files and a few tips. Remember you will have two separate Web pages: one page for Part 1, and another page for Part 2. They can not go on the same page.

*Note: using the HTML you have learned in class. In other words, no tables or other things we haven't learned in class yet!

Use http://validator.w3.org/ to check your code as you develop it. Fix any problems the validator reports. If you're unable to figure out what the issue is, let me have a look at the page and I'll be happy to help isolate the problem. By the time you turn in these pages, they need to be able to pass through the validator without issue in order to be eligible for full credit. Failure to validate the code before you turn it in will cost you 20% of the grade.

This is a challenging assignment, and I encourage everyone not to wait until the last minute. The most important part is that you understand the HTML behind these pages. Your HTML documents should look as close as possible to the examples below, with two exceptions:

  1. Don't bother trying to match the font exactly. Remember, your computer might very well not have the exact same fonts as the one from which this screen capture was taken. Just try to come close.
  2. It's not necessary to force line breaks to make each line end where it did on my screen capture. Just let your text wrap to fit the page.

Part 1 | Part 2


Part 2: Discount School Supplies

Graphics:

To download graphics, click on link and then right click on image and save to disk.

Tips:

  • This page uses an image as a background. (See module 4 for how to do this via CSS.) An image used as a background will automatically tile (repeat) to fill the page.
  • Notice the link color has been changed to a greenish brown
  • Text has been indented so it does not interfere with the background image. See "making space" in the previous module.
  • The paperclips were aligned using an attribute for the Image tag
  • Use a global style sheet to set the sans-serif fonts, link color, and background image.

 

DSS screen shotUsing the graphics and tips above, create a Web page that looks like the Web page displayed on the left. For a clearer picture of this Web page, click on the picture.

 


Part 3: SSCC Campus Defense Club Newsletter

Graphics:

To download graphics, click on link and then right click on image and save to disk.

Tips:

  • This page uses an image as a background. (See module 4 for how to do this via CSS.) An image used as a background will automatically tile (repeat) to fill the page.
  • There is a bug in some browsers that makes the bullets disappear. Use an attribute in the image tag to force enough additional space on either side of the image to ensure that the bullets are fully visible.
  • The trick or treat image should be a link to http://www.halloween-online.com/
  • The title is just a header but looks like a banner because of the background image
  • The library photo was aligned using an attribute for the Image tag
  • Use a global style sheet to set the sans-serif fonts and background image.

 

SSCC Defense Club screen shotUsing the graphics and tips above, create a Web page that looks like the Web page displayed on the left. For a clearer picture of this Web page, click on the picture.

 

Color on the Web: The Concepts

Color can effect a person's mood or emotion, it can change a person's perceptions and it can invoke memory.  Think about how many times you have used color to describe a person's mood or emotional state.

  • He was green with envy
  • I am feeling blue
  • She was seeing red

InfoPlease: The Psychology of Color

Now, consider what message the two titles below convey? Who are you going to invest your money with? Does one color speak more to responsibility or to energy?


Robert Smith Financial Services
 

Robert Smith Financial Services


Robert Smith Financial Services
 

Robert Smith Financial Services

How Color Affects Moods, from Good Housekeeping

        Pink: soothes, acquiesces; promotes affability and affection.

        Yellow: expands, cheers; increases energy.

        White: purifies, energizes, unifies; in combination, enlivens all other colors.

        Black: disciplines, authorizes, strengthens; encourages independence.

        Orange: cheers, commands; stimulates appetites,conversation, and charity.

        Red: empowers, stimulates, dramatizes, competes;symbolizes passion.

        Green: balances, normalizes, refreshes; encourages emotional growth.

        Purple: comforts, spiritualizes; creates mystery and draws out intuition.

        Blue: relaxes, refreshes, cools; produces tranquil feelings and peaceful moods.

From Shades of Success (source no longer available online)


Color Contrast & Dimension in News Design

http://poynter.org/special/colorproject/index.html is a well-done 2001 Website that covers color theory and its applications in news presentation. (Requires Macromedia Flash Player.)

Color on the Web : The Code

There are several ways in which we can add color using the HTML code we have learned.  As we learn more about HTML we will discuss other ways to add color including graphics and tables.

  • Add color to the background
  • Add color to the links
  • Add color to the text
  • Tips on using color

Adding Color to the Background

The background color of a Web page can be controlled using CSS to re-define the body tag.

To change the background of our document to a lovely shade of pink we would use the following HTML/CSS code.

<head>
<style>
<!--
   body { background: #FFCCCC }
-->
</style>
</head>


Adding Color to the Links

CSS can also where you control the color of the links in your Web page.  Changing the color of the links from the default blue,  red and purple, can help give your Web page a sophisticated look and make it more readable.

The attributes below control the color of the links.

a:link The color of link text that has not been clicked yet.  Default=Blue
a:active The color of an active link (as the mouse clicks on the link) Default=Red
a:visited The color of a visited link or link that has already been clicked. Default=Purple
a:hover:The color a link turns when you mouse over it. There is no default in HTML; links don't change color on mouseover unless you use CSS to tell them to do so

The following code would change our document to a lovely shade of pink with lemon-chiffon colored links that turned light green when they were active and teal after they were visited.---Ouch!----

<head>
<style>
<!--
   body { background: #FFCCCC }
   a:link { color:FFFFCC }
   a:active { color: 99FF99 }
   a:visited { color: 000099 }
-->
</style>
</head>


Adding Color to the Text

If  you want to change the color of the text in the entire document, use CSS to set the color for the body tag.

The code below would give us a yellow background with pink text--very hard to read...

<head>
<style>
<!--
   body { background: #FFFF00; color: #FFCCCC }
-->
</style>
</head>

If you want to change a section of text you can use inline CSS to change the color property:

<span style="color: #FF0000">stand out using CSS</span>

 

Some tips on using color

        Most browsers will display basic colors if you write in the word (blue, red, etc.) instead of using the hexadecimal value (#3366FF). Don't count on this without testing thoroughly. Not all color names are read universally--causing many of the pastel colors to be displayed as white.

        You will often see HTML code where the # sign is not included with the hexadecimal value.  If you omit the #, Internet Explorer will still read the code correctly, but other browsers will not let you get away with sloppy coding. Use the #; that is the correct way to write it.

        Don't use color just because you can! Gratuitous use of color is distracting and can take the attention away from your message.

        Use color consistently.

        Remember that colors can invoke emotions and determine how you are perceived, and that they often have cultural connotations as well.

 

Terms and concepts to know

<DIV>
Headers
Dithering
Web Safe
RGB
Hexadecimal
GIF
PNG

JPEG (uses file extension .jpg)
ALT
Alink
Vlink
Link
Text
<IMG>


Readings

WebMonkey: Intro to HTML
http://hotwired.lycos.com/webmonkey/96/53/index0a.html?tw=authoring

About.com: Writing well for the Web

http://webdesign.about.com/od/writing/a/aa061598.htm

About.com: Color Symbolism

http://webdesign.about.com/compute/webdesign/library/weekly/aa070400a.htm


Well, it seemed like a good idea at the time:

Why "ALT" attributes are important: turn off images in your browser (in MSIE, Tools/Internet Options/Advanced/Multimedia and uncheck "show pictures") and visit http://www.epicurious.com/


More information

HTML

HTML Compendium

ZDNet Tag Library

Bare Bones Guide to HTML 

Photoshop Cafe

 


Other browsers

Many people use a text-only Web browser called Lynx. This "emulator" shows what Web pages would look like in Lynx:
http://www.delorie.com/web/lynxview.html

See how the Web looked in earlier browsers: emulators for line-only browsers, and for NSCA Mosaic, Mosaic Netscape, Netscape Navigator, Lynx, Internet Explorer, and HotJava.
http://www.dejavu.org/


Shareware

Shareware.com,
http://www.shareware.com

Tucows,
http://www.tucows.com


Color

Web Safe Color Palette from Lynda Weinman
http://www.lynda.com/hexh.html

Color Contrast & Dimension in News Design

Lynda Weinman Web Safe Color Chart

Web Monkey Graphics Tutorials