CH11 Graphics Notes

© 2004 Ken Baldauf, All rights reserved.
Graphics
CGS2826 Web Design
Program in Interdisciplinary Computing
Florida State University
From Web Style Guide, Chapter 11: Graphics

What are the most effective uses of graphics, and what’s
the best way to integrate words and images into an
understandable story for the user?

Roles of Web Graphics
 Define site boundaries
 Provide and enhance content:
illustrations, diagrams, charts,
visualizations, word art

Characteristics of Web
Graphics
 RGB model is called “additive” because a
combination of the three pure colors—red,
green, and blue—“adds up” to white light.
 16.8 million colors that are theoretically
possible in a 24-bit or 32-bit display screen.
 72 to 96 pixels per inch (ppi)

Gamma
The degree of contrast between the midlevel gray values of an image.

Graphics and Bandwidth
 Some web users access the Internet via modem,
slow wireless connection, or cell phone network,
and others view pages on the small display of a
handheld device such as a cell phone or an iPod
Touch. This reality imposes limits on the file size
and physical dimensions of web graphics.

Graphics File Formats
 GIF – 8 bit, 256 colors
 Compression: lossless, ideal for logos
 Dithering: reducing color amnt to 256
 Interlaced: loads entire image from low to high rez
 Transparent: select background color as trans
 JPEG – 24 bit, 16.8 million colors
 Great for photos
 PNG
 Combines best of GIF and JPEG but may lack support

GIF Dithering

Advantages of GIF files
•gif is the most widely supported graphics format on the web
•gifs of diagrammatic images look better than jpegs
•gif supports transparency and interlacing
Advantages of JPEG images
•jpeg achieves huge compression ratios, which mean faster
downloads
•jpeg produces excellent results for most photographs and
complex images
•jpeg supports full-color (24-bit, true-color) images

Display vs. Print
Four-color printed images are separated into
four subtractive printing colors (cyan,
magenta, yellow, and black).

Display vs. Print

Coding graphics
 Include height and width specs for
faster loading pages
 Include “alt” as a fall back
<img src="up.gif" height="10" width="10" alt="Go to top of page">

Color Combos
http://www.colorsontheweb.com/colorcontrast.asp

Harmonious Combos

CH11 Graphics Notes

More Related Content

Similar to CH11 Graphics Notes (20)

More from Program in Interdisciplinary Computing (20)

Recently uploaded (20)

CH11 Graphics Notes