CH11 Graphics Notes

© 2004 Ken Baldauf, All rights reserved.

Graphics

CGS2826 Web DesignProgram in Interdisciplinary ComputingFlorida 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)


GammaThe 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

Technology

Transcript of CH11 Graphics Notes