Lesson 7

Web GraphicsWeb GraphicsWeb GraphicsWeb GraphicsRobert BenardRobert Benard

Mott Community CollegeMott Community College

Topics• How web graphics become part of a web page

and its message• How web graphics become part of a web

pages’ navigation• Discover how a theme can be enhanced by

graphics• Understand the concepts of pixels, additive

and subtractive colors, anti-aliasing• Learn what graphic styles are best for the web

Web GraphicsDid you know that early web pages did not have

graphics at all?

Can you imagine going to a website today without graphics?

Web GraphicsWeb graphics play many roles in web design.

They are:

• Part of the message• Part of the user interface and navigation• Part of the theme

Web Graphics as the Message

There are times when web graphics are your message. When this is the case, graphics are:

• Large• Photographic or detailed• Important

Sometimes graphics are the message because “a picture is worth a thousand words.” Imagine explaining what a dog looks like to someone that has never seen one, but for other things, graphics are not needed at all.

Web Graphics as NavigationIt is sometimes attractive to have nice graphics serve as our

user interface and navigation elements. These navigation elements are called icons just like on our Windows desktop.

A good example of using graphics as icons in Mott’s website. http://www.mcc.edu. We have also used icons in this class. Remember the pictures for the landscaping company!?

From that lesson, what do you remember about web graphics and accessibility standards?

Web Graphics as NavigationTo make sure our web pages are accessible, we want to

make sure that we have “alternate text” available for those who may be unable to see the page.

Web Graphics as ThemeFor websites where “look” is important, most web

designers develop a theme that is common throughout the entire site. The reason behind this is so users are aware they are still on the same site and it makes it more visually appealing. This hopefully translates to users staying longer and purchasing our products!

Navigation graphics can be incorporated in a theme.

The Technical StuffPixels: On computers, we view tiny, almost

visible square dots of color called pixels. The word pixel means picture element. These pixels combined together make our image. Think of George Seurat’s painting using pointillism.

The Technical StuffResolution is the number of dots per inch (dpi).

If the resolution is low, there are few dots per inch. If the resolution is high, there are many dots per inch.

Do we want high or low resolution images for the web?

The Technical StuffColor: Computers are based on additive colors, not

subtractive colors. With additive colors, the more color you add, the lighter the color gets. With subtractive colors, the more color you add, the darker the color gets (think of coloring with multiple crayons as a kid – remember the ugly brown color you would get?)

Additive colors get lighter because your computer displays images by combining different colors of light.

To put this in the easiest way possible, what color is a standard piece of paper? What color is your monitor when turned off?

The Technical StuffAliasing: Because pixels are square, it is very difficult to

display things like curves or diagonal lines without them appearing like steps. The jaggedness, or stairs, is called aliasing.

Anti-aliasing is the process of using colors to fool the eye into thinking something is smooth.

Graphic StylesThe graphic styles that are best for the web are GIF and

JPG.

Why do you think these are the best graphic styles?

Why isn’t BMP a good graphic style to use for the web?

Graphic StylesGIF (graphic interchange format) was developed to send

graphics over telecommunication lines. GIF images are:– Compressed for smaller size– 8-bit (256 colors only)– Parts can be made transparent– Compatible with older browsers– Can be animated

Graphic StylesJPG (joint photographer’s expert group)

– Can be thousands of colors– Can’t be transparent– Can’t be animated– Allows different quality types which means different image

sizes (storage size)

Topics Covered• Web graphics become part of a web pages’

message when a picture is worth a thousand words

• For appearance sake, many web pages include images for navigation buttons

• To create continuity and an attractive design throughout a website, many websites use graphics as part of their template.

• Pixels are like little dots on a page to make a larger image

• Computers use additive colors because colors are made with light

Topics Covered• GIF, PNG and JPG images are best for the

web because of their quality and size.