1

Graphics and the Web

INFO 654 – Spring 2007

2

Sources and Credits for this Material

Used examples from Son of Web Pages That Suck (2002) by Vincent Flanders

Used graphics material from Web Style Guide (2001) by Lynch and Horton (excerpted from http://www.webstyleguide.com)

3

Objectives

In this session, we will address: Graphics Primer

With examples

4

Introduction to Graphics Parameters that influence the

display of Web graphics: Display monitor – 256 colors or more? Bandwidth – dial-up?

5

Color Displays

Displays use red-green-blue (RGB) additive color model.

OS organizes display into a grid of x and y coordinates, or pixels.

6

Pixels and Color Depth

Memory is allocated to each pixel (aggregate is called VRAM)

In the simple extreme, a 1 bit display can only manage two colors, black and white.

7

Pixels and Color Depth (cont’d)

With 8 bits of memory dedicated to each pixel, each pixel can be one of 256 colors (2 to the eighth power).

8

Pixels and Color Depth (cont’d)

More memory allows nearly photographic color:

9

VRAM Determines Color Depth

Amount of VRAM dedicated to each pixel is “color depth”

10

Color Depth and Graphics Files Same terminology and memory schemes

describe color depth in graphics files

11

True Color 24 bit images are much larger:

12

Graphic File Formats: GIF Graphic Interchange Format (GIF) introduced by

CompuServe in 1980s Adopted by original designers of WWW in 1990s Majority of Web images are GIF and all browsers

that support graphics can display GIF files GIF has an efficient compression scheme GIF is limited to 8-bit (256 or fewer) color

palettes. GIF variants support transparent color and

interlaced formats popularized by Netscape Navigator.

13

GIF File Compression Uses Lempel Zev Welch (LZW) file compression Best compressing images with homogenous color Not so good with many colors and complex textures

14

Improving GIF Compression Reduce the number of colors

http://www.dartmouth.edu/~hist12

15

Interlaced GIF Permits display of low-resolution version of full-sized

GIF picture while file is still downloading.

16

Transparent GIF GIF format allows you to pick (often background) colors to be transparent:

But transparency is not selective, can have unintended results:

17

Animated GIF Can combine multiple GIF images into

a single file to create animation. Has a multiplicative effect on file size Mitigated by streaming delivery to viewer No interface controls – play over and over

again Only meaningful content is to illustrate a

concept or technique where animation is really required.

http://auto.howstuffworks.com/engine-inline.htm

18

GIF Animations Two of Vincent Flanders’ non-rules:

In Web design, when you’re not sure if you should do something, don’t do it because it is probably wrong.

Remove unnecessary design elements.

Too many non-optimized GIFs: http://www.gam-robert.com

19

3-D Logos and Images: Just Say “Whoa”

There’s nothing that says, “I’m an amateur Web designer and I don’t know what I’m doing” like 3-D logos The ‘big boys’ don’t use them, you

shouldn’t either

20

Graphic File Formats: JPEG Unlike GIF, Joint Photographic Experts

Group (JPEG) images are full-color (24 bit, or “true color”)

Favored by photographers JPEG ‘sliding scale’ graphics compression

uses a discrete cosine transformation Can achieve extremely high compression

ratios But it progressively degrades image details.

21

JPEG Compression Discards “unnecessary” data “Lossy” compression technique

22

Another JPEG Compression Note the

compression noise and distortion in the bottom dolphin

Is not worth the saved download time

23

Another JPEG Compression Compressed interface graphic (a) in GIF

format (b, no compression artifacts) and JPEG compression (c, with ‘noise’ around text and borders)

24

PNG Image Format Portable Network Graphic (PNG, pronounced

‘ping’) is an image format developed by a consortium of graphic software developers as a GIF alternative. http://www.libpng.org/pub/png/book/chapter01.html

Features designed specifically for web pages: Full range of color depths Supports sophisticated image transparency Better interlacing Automatically corrects display monitor gamma Holds short text description of image content, allowing

Internet searches for images.

25

Advantages of GIF Most widely supported graphics format on

the Web Diagrammatic image GIFs look better than

JPEGs GIFs support transparency and interlacing

26

Advantages of JPEG Huge compression ratios mean

faster downloads Excellent JPEG results for most

photographs and complex images JPEG supports full-color (24-bit, “true

color”) images

27

Screen vs. Printed Color Artwork

Computer screen is lower resolution than printed page.

But differences in quality between conventional four-color printing and computer screen is not that great.

28

Complex Illustrations or Photographs

An anatomical illustration – extra detail and subtle nuances of high-resolution artwork are not entirely lost when graphic is reduced to Web page size.

29

Diagrams for the Computer Screen

Basic diagrams show well if they have horizontal or vertical lines, or diagonal lines at 45-degree angles.

30

Diagrams for the Computer Screen

Simple isometric perspective graphics also work well

31

Diagrams for the Computer Screen

This diagram compresses well because it is suited to LZW GIF compression.

32

HTML and Graphics:Colored Backgrounds

Web background colors offer a “zero-bandwidth” means to change the look of your pages without adding graphics.

33

HTML and Graphics:Background Texture Patterns

1995 Netscape Navigator gave web page authors ability to use small tiled GIF or JPEG graphic as background pattern.

Background texture graphic should be small GIF or JPEG, no more than 100 x 100 pixels in size.

34

Bad Backgrounds and Color Problems

When improperly used, background images make the text harder to read and increase page load times: http://www.nauticom.net/www/rnassif

/ Some links to using color on the

Web: http://www.colormatters.com

35

One Image Equals One Page

This technique can make the page size quite large, and one-image pages often have no text links: http://www.uiowa.edu/%7Etqstory/

36

HTML and Graphics:Imagemaps Imagemaps offer a way to define multiple

“live” link areas within a graphic.

37

HTML and Graphics:Imagemaps Imagemaps can incorporate multiple

links into a graphic illustration.