Screen Resolution

• 72 pixels per inch

Typical screen resolutions:

• 640 x 480 pixels
• 800 x 600 pixels

• web page display?
• printing web pages?
• scanning pictures & slides for the web?

Bit Depth in Displays and Images

• R is for Red
• G is for Green
• B is for Blue

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

A 1-bit display has 2¹ colors.

An 8-bit display has 2⁸ colors.

A 24-bit display has 2²⁴ colors.

File Size & Format

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

• larger file size = longer download time

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

• 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

• 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

Hexadecimal Codes for Color

browser-safe palette organized by hue

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.

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

Color Serve Java[broken link, 2004/12/04]
Mediarama's RGB-HEX Converter