Multimedia Images

1
Multimedia Images
2
Basic Image Concepts

• An image is a spatial representation of an object
• An image can be thought of as a function with
  resulting values of the light intensity at each
  point over a planar region
• In computers, this function must be sampled at
  discrete intervals

3
Basic Image Concepts

• An image can be represented as a matrix of pixels
• Intensity at each pixel is represented by an
  integer (called a gray scale level) into which
  the color of the image is encoded
• If there are just 2 intensity values, 0 and 1
  represent black and white (1 bit)
• If 8-bit integers, color levels range from 0
  (black) to 255 (white)

4
Basic Image Concepts

• Spatial Resolution - number of pixels in the
  matrix (pixels X pixels). Affects amount of
  detail that can be displayed
• Image size - can be very large. E.g.
• 640X480 image with 8bits/pixel
• 307,200 8bit integers
• 2,457,600 bits

5
Basic Image Concepts

• Image Format - a stored image is an array of
  values
• Each value represents data associated with a
  pixel in the image
• For color, this value may be
• 3 numbers - intensities of red, green and blue
  components of color at that pixel
• 3 numbers - indices to tables of RGB intensities
• 1 number - index to table of color triples
• 1 number - index to other color models, such as
  CMY, YIQ, HSB, etc

6
Color Fundamentals

• ROY G. BIV (Red Orange Yellow Green Blue Indigo
  Violet)
• A way of memorizing the visible spectrum.
• ascending frequencies of visible light
• infrared below
• ultraviolet above
• Eye receptor cones for red, green, blue
• all hues are combinations of RGB
• these are the additive colors

7
Color Fundamentals

• Color monitors on PCs
• a VGA monitor has 640x480 pixels
• each pixel has a red, a green, and a blue dot
• each dot is illuminated in turn by a
  corresponding electron gun with a specified
  intensity

8
Color Fundamentals

• Commonly used color models
• RGB Red, Green, Blue - additive primary colors
  (color monitors)
• CMY Cyan, Magenta, Yellow - subtractive primary
  colors plus black (color printers)
• YIQ (YUV) luminance, chrominance are decoupled
  (TV)
• HSV hue, saturation and value (color image
  manipulation)

9
Color Models

• RGB
• Each color appears in its primary spectral
  components of red, green, blue
• values for red, green, blue are between 0 and 1

10
Color Models

• CMY
• Each color appears in its secondary spectral
  components
• C 1 - R
• M 1 - G
• Y 1 - B

11
Color Models
12
Color Models

• YIQ (YUV)-luminance,inphase,quadrature
• used in color TV broadcasting
• human eye is more susceptible to changes in
  luminance than to changes in hue or saturation
  (color information)
• luminance is proportional to amount of light
  perceived by eye
• more bandwidth dedicated luminance than to
  chrominance

13
Color Fundamentals

• Dithering
• Added to sample data for the purpose of
  minimizing quantization error
• a photo may contain millions of colors
• but an 8 bit color palette contains only 256
  colors
• so a mapping must be done at each pixel to
  determine the closest available color in the
  palette
• a mathematical process

14
Color Fundamentals
Non-dithered standard colors
Dithered custom colors
15
Basic Image Concepts

• Anti-aliasing
• the technique of minimizing aliasing (jagged or
  blocky patterns) when representing a
  high-resolution signal at a lower resolution.

halo effect
16
Image Types

• Only 2 types are used in computers
• Bitmap images
• Simple information matrix describing pixels

• Vector images
• A vector is a line that is described by the
  location of its two endpoints

17
Still Image File Size

• Storage for Bitmap images
• Full 24-bit True color

• 3 bytes/pixel 640 x 480 pixels 1 MB
• Gray scale
• 1 byte/pixel 640 x 480 pixels 300 KB

18
Still Image File Size

• Vector Images require info about color and
  location to be stored
• Full True 24-bit color
• (3 bytes/vector 4 bytes/vector) number of
  vectors 10 KB give or take
• Gray scale
• (1 byte/vector 4 bytes/vector) number of
  vectors 3 KB give or take
• When few vectors, more efficient than bitmaps.

19
Bitmap Software for PCs

• Paint (on all Windows systems)
• Macromedia Fireworks (on M213 student PCs)
• Adobe Photoshop Elements (on M213 student PCs)
• The GIMP (Available for download at gimp.org)
• and others

20
Vector Software for PCs

• MS Office
• Macromedia Freehan
• Adobe Illustrator
• and others

21
Image Creation

• BITMAP
• Limited to 2D
• From scratch with a paint program
• VECTOR
• 2D from scratch with Office apps
• 3D from scratch with pricey software
• e.g. Macromedia Extreme 3D for 399

22
Image File Formats
Plus PBM, DRW and others
23
Image File Formats

• Compression is extremely important
• Algorithms for reducing the number of storage and
  transmitted bytes
• Lossy versus lossless
• Web image formats
• GIF87a, GIF89a, JPEG
• Licensing fees for developers using GIF
  compression algorithm
• PNG is rising

24
GIF - Graphic Interchange Format

• Most popular image format on Web
• Compression is lossless - LZW algorithm which
  takes advantage of repetition in data streams
• Good for condensing rows of pixels of identical
  color - logos, icons, line art, cartoons, etc.
• 8-bit indexed color - indexed each pixel
  contains index to cell in color table

25
More about GIF

• Interlacing
• normal GIFs are displayed either 1 row of pixels
  at a time or all at once when entire image is
  downloaded.
• Interlaced GIFs displayed in 4 passes--every 4th
  line in each pass
• GIF87a vs. GIF89a
• GIF89a allows animation and transparency

26
JPEG - Joint Photographic Experts Group

• Compression is lossy
• based on spatial frequency or concentration of
  detail
• low frequency areas compressed more efficiently
  than high frequency areas
• Good for photographic images (better than GIF
  compression anyway)
• how much compression depends on photo
• e.g. detail rich photo takes 85K as GIF requires
  only 35K as JPEG

27
More about JPEG

• Allows variable compression
• Q setting between 1 and 100 (usually)
• varies among tools that create JPEGs
• lower number lower image quality but better
  compression rates (smaller files)
• Q setting has no mathematical significance
• actual compression ratio depends on individual
  image
• Lossy compression makes flat colors blotchy and
  pixilated

28
More about JPEG

• Supports 24 bit RGB color information
• If displayed on 8 bit machine, dithering
• Dithering is more acceptable in photographic
  images than areas of flat color
• Progressive JPEGs - displayed in a series of
  passes
• not supported on older browsers like Navigator
  2.0 and Internet Explorer 2.0

29
PNG - Portable Network Format (ping)

• Developed in early 1995 as nonproprietary
  alternative to GIF
• Taking a while to catch on
• Uses lossless compression
• horizontal compression similar to GIF
• vertical compression using series of filters
• typically compresses 5-25 better than GIF

30
More about PNG

• Not fully supported by all browsers (yet)
• A good GIF substitute
• Not a good JPEG substitute (lossless compression
  results in bigger files than JPEGs lossy
  compression)
• Supports 24 bit indexed color (and higher so
  could be a good TIFF (tagged image file format)
  substitute for detailed photos)
• Supports interlacing, transparency, lots of other
  unique features