Digital Images and Graphics

Digital pictures (images and graphics) are 2D representations of some information, stored in digital form.

• How We See
• What We See
• Color Systems
• Digital Color
• Digital Pictures
• Display Hardware
• Vector vs. Raster
• Digital File Formats

How We See

Light passes into the eye (through the pupil) onto the retina. Information passes to the brain via the optic nerve.

• Rods detect luminance (light levels)
• Concentrated about the periphery
• Works well even in low light
• Cones detect color
• Specialized cones: red, green, blue
• Concentrated in the center
• Needs more light to see

Read more about this.

What We See

Our eyes pick up light waves (electro-magnetic radiation), which are perceived as an image.

• Frequency in the Visible Spectrum
• Measured in nanometers (nm)
• Humans can see wavelengths of 350-780 nm
• Red = 700 nm
• Green = 546 nm
• Blue = 436 nm
• Warm colors appear toward the infrared end of the spectrum (red, orange).
  Warm colors tend to advance visually.
• Cool colors appear toward the ultraviolet end of the spectrum (blue, violet).
  Cool colors tend to recede visually.
• White light = all colors added together (Red-Green-Blue primaries)
• Perceived Color Attributes
• Hue or Color: the predominant color
• Saturation or Brightness: purity of the color
• Value, Intensity or Lightness: quantity of light reflected or transmitted

Color Systems

Colors that we see may be reflected light (subtractive) or emitted light (additive).

• Color mixing
  • Primary colors are pure colors.
  • Secondary colors are mixtures of 2 primary colors.
  • The complement of a primary color is its opposite secondary color (i.e. mix of other 2 primary colors).
  • Tertiary colors are mixtures of the primary colors with their complementary secondary colors.
• Additive colors show emitted light
  • Represented as RGB in computer
  • Examples: computer monitor, TV
  • Mixing colors makes them lighter
• Subtractive colors show reflected light
  • Represented as CMYK for 4-color printing
  • Examples: printed pictures, paintings
  • Mixing colors makes them darker

Digital Color

Computer monitors display colors as additive mixes. Values (0..1) represent relative strength of the color light.

Colors are represented by quantized (integer) values. Quantization determines how many colors there are to work with.

• Binary
• one bit per pixel
• color is either 0 (black) or 1 (white)
• bitmaps commonly used for cursors and icons
• can simulate grey scales with dithering
• Grey scale
• usually one byte per pixel
• color ranges from 0 (black) to 255 (white)
• RGB
• fixed number of bits per color band
• full color = 24-bit (one byte each for RGB)
• RGBA has additional byte for transparency (alpha = A)
• Color Maps
• usually one byte per pixel (0..255)
• pixel value corresponds to address in a color lookup table
• color lookup table indicates full color for that value
• standard color maps versus custom color maps

Read more about this.

Digital Pictures

• Aspect ratio
• ratio of image width to image height
• usually 4:3 (horizontal picture)
• Resolution
• amount of detail that may be reproduced
• for raster displays, this is the number of pixel columns x rows
• Coordinate system
• maps pixels and points to screen locations
• left-handed vs. right-handed systems

Visual Mix

Small spots of color next to each other are "mixed" in our brain, so we perceive a single new color.

Visual mix allows us to see continuous color tones

Display Hardware

• The picture that appears on the screen is stored in memory associated with the display called the Frame Buffer
• Resolution of the frame buffer indicates maximum detail that may be displayed
• Depth of the frame buffer indicates how many bits are used to represent a color
• The picture drawn on the display fades quickly, allowing changes to be made instantly
• The refresh rate indicates how often the display redraws the picture (e.g., 30 Hz or 60 Hz)

Read more about this.

Vector vs. Raster Pictures

• Raster images
• Sample the electro-magnetic radiation at regular intervals
• Each sample is assigned a quantized color value
• Each sample corresponds to one pixel on the screen
• Raster display re-draws every pixel
• Advantages: flexibility (requires no underlying structure), supports subtle color changes, simple to display
• Disadvantages: resolution- and orientation-dependent, typically large files
• Vector graphics
• Pictures are represented by shapes composed of connected endpoints
• Vector formats may also include faces (filled or unfilled) and curves
• Endpoints may be multidimensional
• Vector display re-draws the image at regular time intervals
• Advantages: compact representation of underlying structure, transforms well, can edit objects individually
• Disadvantages: display processing times, subtle coloring changes

Read more about this (view the first few pages only).

Digital File Formats

• Header - contains information about the picture
• Picture format (i.e. what fields occur where, and what they mean)
• Resolution and quantization
• Title, date, creation software, other annotations
• Color lookup table
• Data - the picture itself
• ASCII data - large, but moves readily between systems
• Binary data - beware of endian
• Footer - supplements the header