Last update: April 30, 1998

## The Mathematics of Web Design

### The Biology Project

Screen Resolution

Computer monitors typically display at:
• 72 pixels per inch
 What does "pixel" stand for? answer "picture element"

Typical screen resolutions:

• 640 x 480 pixels
• 800 x 600 pixels
What are the implications for
• web page display?
• printing web pages?
• scanning pictures & slides for the web?

Bit Depth in Displays and Images

In computer displays and digital images,

• R is for Red
• G is for Green
• B is for Blue
These colors are "additive" and when mixed together at full intensity, give white. Different mixtures give different colors.

 What color do you get if you have no red, green or blue? answer black

The number of colors in an image or display is called bit-depth.

A 1-bit display has 21 colors.

An 8-bit display has 28 colors.

 An 8-bit image contains 256 colors. Why do none of the pixels have a value of 256? answer values in an 8-bit image range from 0-255 and the 0 counts as the first number

A 24-bit display has 224 colors.

File Size & Format

A digital image is a rectangular array of numbers. Each pixel has an x-y location and a value.

• larger image dimensions = larger file size
• higher bit depth = larger file size

In order to increase efficiency of images travelling on the web, they are compressed into either GIF or JPEG format.

GIF uses LZW compression, which
• recognizes and compresses repeated patterns using a "data dictionary"--patterns are entered into the dictionary and reused when they reappear in the image
• limited to 1- to 8-bit images
• is "lossless"
• can achieve compression ratios of 40:1 or better
JPEG compression:
• can compress continuous-tone image data by using a collection of algorithms that can be controlled by the user to emphasize quality or compression
• can compress up to 24-bit images
• is "lossy"
• can achieve compression ratios of 20:1 or better
 Which file format would best compress each image below? answer JPEG because it is a photo with continuous tones of color answer GIF because it is has repeating patterns of black and white pixels

The "browser-safe" palette has 216 colors

Hexadecimal numbers convert RGB values to something that web browsers can understand. Hexadecimal is derived from base 16 mathematics--we are used to dealing with base 10 mathematics.

 Base 10 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Base 16 0 1 2 3 4 5 6 7 8 9 A B C D E F

The good news is...

all RGB values in the browser-safe palette are combinations of the same six color values--which are 20% increments of red, green and blue.

 % Color Value 0 20 40 60 80 100 Color Value 0 51 102 153 204 255 Hex Code 00 33 66 99 CC FF

That means you can mix and match these browser-safe hex values to make browser safe text and backgrounds in HTML.
 #33 66 00 a little red (20%), more green (40%), and no blue (0%)
 #33 66 99 a little red (20%), more green (40%), and even more blue (60%)

Other, less mathematical ways of choosing hexadecimal colors