Using Images on the Web

1
Using Images on the Web

• Important issues to consider

2
Images on the Web

• Color
• Resolution
• Bit-depth
• File Type

3
Color

• It is important to understand the difference
  between the natural colors we see and the colors
  we see on computer monitors. These differences
  have implications for design.

4
Color

• CMYK
• Cyan, Magenta, Yellow, blacK
• Four color process
• Reflective color
• VERY different from monitor color

5
Color

• RGB (monitor color)
• Red, green, blue
• TV, video, computer monitors
• Straight from light source not reflective
• RGB values intensity of colors
• Hexadecimal code (will see in HTML source code)

6
Color

• Indexed color (special monitor color)
• Palette of up to 256 colors
• Colors not in the palette are approximated
• Image may appear dithered
• Fewer colors smaller file size faster
  download time

7
Resolution

• Print resolution
• Dots per inch (dpi)-pixels per inch (ppi)
• Quality increases as dpi or ppi increases
• Monitor resolution is completely different from
  printer resolution..

8
Resolution

• Images on screen
• Very different from printed images
• Lower resolution than print!!!!
• Bit depth
• Computer settings
• Ppi defaults on Mac72 on PC 96
• Higher pixel count higher resolution
• More colors higher resolution

9
Bit Depth

• Pixel depth or bit resolution
• Bit (1s and 0s - on and off)
• 2-bit (four colors)
• 4-bit (sixteen colors)
• 8-bit (256 colors)
• 16-bit (thousands of colors)
• 24-bit (millions of colors)

10
Images

• File format
• internal information signifies file type
• Native file format
• Graphic files
• Bitmapped (pixel based, paint, Photoshop)
• Vector (math-based, draw, Illustrator)
• Graphics on web are ALWAYS bitmapped
• Rasterized changing vector images to bitmapped
  images

11
Images

• GIF - Graphic Interchange Format
• Cross platform
• Compressed (lossless)
• Indexed color -maximum of 256 colors (8-bit)
• Can be transparent, interlaced and animated
• Large areas of solid color, simple illustrations,
  logos / cartoons, text as graphics

12
JPEGS

• Joint Photographic Experts Group
• Cross platform
• Compressed (lossy)
• Maximum of 16.7 million colors (24-bit)
• Cannot be transparent, interlaced or animated
• Photos, images with subtle color changes, depth,
  lighting, etc.

13
Terminology

• Aliased graphic - jaggy around edges
• Anti-aliased - appears smooth around edges
• Thumbnails -small version of an image
• Alternate labels -text that will show as image is
  downloading or in place of image

14
File size

• Refers to how much disk space a file takes up
• 8 bits 1 byte a letter of the alphabet
• 1024 bytes kilobyte
• 1024 kilobytes 1 megabyte
• Most web graphics measured in kilobytes

15
Web-ified Images

• Goal is to get maximum image quality for minimum
  file size
• Remember that file size and image size are VERY
  different
• How you save depends on type of image
• Always double check the file size given in an
  application using Get Information

16
Tips for using images

• Remember file size versus image quality
• Always save an original copy - you cant get
  colors back
• Make sure your image is on the server -otherwise
  your link will not work
• Dont be afraid to experiment