Computer Graphics P02 Digital Images and Graphics Formats
Aleksandra Pizurica
Ghent University
Telecommunications and Information Processing
Image Processing and Interpretation Group
P02_2
Overview
• Digital images
Sampling and quantization
Image resolution
Computer screen standards
• Graphic formats
Vector graphics
Raster graphics
• Color perception and reproduction
Tristimulus theory of color perception
True color images
Indexed color images
Digital Images
P02_4
Digital Images (1)
Illustration from Computer Graphics course of Thomas Funkhouser, Princeton University
P02_5
Digital Images (2)
Illustration from Computer Graphics course of Thomas Funkhouser, Princeton University
P02_6
Digital Images (3)
Illustration from Computer Graphics course of Thomas Funkhouser, Princeton University
• Picture element … Pictel … Pixel
• Pixel is a sample (a single point in a raster image)
• In some contexts (raster graphics, printing), pixel is considered as a smallest controllable element of a displayed or printed image, and terms like “square” or a “rectangular” pixel of a given size are used E.g. for 300dpi “pixel size” is 1/300 of an inch (~84.67mm)
P02_7
Digital Images (4)
Illustration from Computer Graphics course of Thomas Funkhouser, Princeton University
Digital Images (5)
P02_8
• How to represent a “black-and-white” photographic image?
• Light intensity is continuous
• It is quantized in a number of discrete „grey values‟
Each pixel has a given grey value (also called „pixel intensity‟)
Extreme grey values are black and white: typically 0 - black and 255 –
white
• The number of grey values (bit depth) depends on the application
• Human eye can distinguish approximately 100 grey tones
Various bith depths
Grey- values Bits
2 1
4 2
8 3
16 4
256 8
From computer graphics course of Patrick Bergmans
P02_9
Image Resolutions
P02_10
• Intensity resolution
Each pixel has only “Depth” bits for colors/intensities
• Spatial resolution
Image has only “Width” x “Height” pixels
• Temporal resolution
Monitor refreshes images at only “Rate” Hz
Slide from Computer Graphics course of Thomas Funkhouser, Princeton University
Computer screen standards
Name Pixels HxV Ratio Total pixels
• QVGA 320×240 04:03 76.800
• WQVGA 432×240 18:10 103.680
• HVGA 480×320 03:02 153.200
• EGA 640×350 09:05 224.000
• VGA 640×480 04:03 307.200
• WGA of WVGA 800×480 05:03 384.000
• SVGA 800×600 04:03 480.000
• XGA 1024×768 04:03 786.432
• XGA+ 1152×864 04:03 995.328
• SXGA 1280×1024 05:04 1.310.720
• WXGA1 1280×800 16:10 1.024.000
• WXGA2 1366×768 16:09 1.049.088
• WSXGA of WXGA+ 1440×900 16:10 1.296.000
• SXGA+ 1400×1050 04:03 1.470.000
• WSXGA 1600×1024 25:16 1.638.400
• WSXGA+ 1680×1050 16:10 1.764.000
• UXGA 1600×1200 04:03 1.920.000
• WUXGA 1920×1200 16:10 2.304.000
• QXGA 2048×1536 04:03 3.145.728
• WQXGA 2560×1600 16:10 4.096.000
• QSXGA 2560×2048 05:04 5.242.880
• QSXGA+ 2800×2100 04:03 5.880.000
• WQSXGA 3200×2048 25:16 6.553.600
• QUXGA 3200×2400 04:03 7.680.000
• WQUXGA 3840×2400 16:10 9.216.000
• HSXGA 5120×4096 05:04 20.971.520
• WHSXGA 6400×4096 25:16 26.214.400
• HUXGA 6400×4800 04:03 30.720.000
• WHUXGA 7680×4800 16:10 36.864.000
Common standards for
classic 4/3 screens
Common standards for
wide screens
From computer graphics course of Patrick Bergmans
P02_11
Binary representations (1)
• Floating point or fixed point
• Graphical algorithms usually employ integers
• Remember: with n bits 2n symbols can be represented
integers from 0 to 2n-1
integers from -2(n-1) to 2(n-1) -1
other combinations possible
210 = 1024 ~ 103 = “1k”
224 = 2(2*10+4) = 210 x 210 x 24 = 1k x 1k x 16 = 16 M(ega) 237 = 2(4*10-3) = 210 x 210 x 210 x 210 x 2-3 = 1/8 T(era) ~ 125 G(iga)
P02_12
Binary representations (2)
n 2**n
8 256
10 1,024 1 kilo
16 65,536
20 1,048,576 1 Mega
24 16,777,216
30 1,073,741,824 1 Giga
32 4,294,967,296
40 1,099,511,627,776 1 Tera
P02_13
Graphic formats
Vector and Raster Graphics
• There are two main types of computer images
Raster images
• Each image point separately stored
Vector images
• Image consists of objects
• Objects are represented by their contours
• Each of these formats has certain advantages and
disadvantages and they are generally used for different
purposes
P02_15
Vector graphics
• Represented in terms of vertices (points) and lines.
• Lines can be straight or curved; Generated mathematically
• Ideal for “simple” images with precise contours (cartoons, logo‟s,…)
• For displaying on Cathode-Ray Tube (CRT) screen, a vector generator
converts the digital coordinates to analog voltages for beam deflection
P02_16 Fig. 1.4 from book FvDFH
Ideal line drawing Vector scan
Raster outline
• Represented in terms of elementary picture elements: pixels
• Well suited for images with a variety of intensity levels, such as digital
photographs and other “realistic” images
• Commonly referred to as bitmap (BMP) even though bitmap strictly
speaking applies only to binary systems
Raster graphics
P02_17
Ideal line drawing Fig. 1.4 from book FvDFH
Raster scan with filled primitives
An example of a raster image
Illustration from computer graphics course of Patrick Bergmans
P02_18
Architecture of a raster display
Fig. 1.2 from book FvDFH
P02_19
The raster is stored as a matrix of pixels representing the screen area. The image is scanned sequentially (video controller) one line at a time. At each pixel, the beam intensity is adjusted according to pixel intensity.
Frame Buffer Refresh
Refresh rate typically 60-75Hz Fig. 1.3 from book FvDFH
P02_20
Vector Versus Raster Systems
•Advantages of raster systems
Richer textural and pattern representation
Cheaper (repetitive regular scanning compared to complex random
scan of vector systems)
• Advantage of vector systems
No jaggies
Scales up arbitrarily remaining
perfectly smooth lines
Easier real-time manipulation
Example from Wikipedia
P02_21
Color perception and reproduction
Color Perception (1)
• Color as such does not exist in nature!
(Colored) light consists of electromagnetic waves of different
frequencies (or wavelengths)
• Color perception is three-dimensional (3D)
We have three types of “sensors” in the eye, which are sensitive
to different parts of the spectrum (Tristimulus theory of color)
• All color representations are hence 3D
Additive (RGB) ; red-green-blue
Subtractive (CMY) ; cyan-magenta-yellow
Other (HSV, Luv, Lab)
• We limit ourselves to RGB representation
P02_23
Color Perception (2)
P02_24
Spectral-response functions of the three types of cones in the human retina.
Fig. 13.18 from book FvDFH
Color Perception (3)
• Natural white light consists of an continuous and uniform
spectrum of EM waves, visible from violet to red
(rainbouw)
Ultra violet infrared
wavelength 400 nm 750 nm
Illustration from computer graphics course of Patrick Bergmans
P02_25
Color Perception (4)
• Color perception depends only on how the light activated
each of the three sensors (Red, Green and Blue)
wavelength
wavelength
Note: Spectral responses here are only schematical (true ones on slide #24)
Illustration from computer graphics course of Patrick Bergmans
P02_26
Color Perception (5)
• Two totally different spectra can be perceived as the
same color
wavelength
wavelength
Illustration from computer graphics course of Patrick Bergmans
P02_27
Color Perception (6)
• Two totally different spectra can be perceived as the
same color
• To reproduce artificially (the impression of) a color, it is
sufficient to generate the same sensor stimuli
• It is best done with light sources with wavelengths that are
close to the maximum sensitivity of the sensors, hence
Red, Green, Blue called R, G, B primaries
• This process is called additive color synthesis
By mixing R, G, B primaries in the right proportions, we can create
impressions of all colors
P02_28
Color images (1)
P02_29
Color images (2)
• One bit per color (0/1) – 3 bits/pixel
P02_30
Color images (3)
• With 8 bits per color 24 bits per pixel
• In this way we can theoretically represent 16.777.216
different colors
• Human eye can differentiate “only” several hundreds of
thousands of colors
• The 24-bit representation is in principle inefficient
• However, much simpler than the “optimal” one
P02_31
Color images (4)
• Eight bits per color (0-255). 24 bits/pixel
P02_32
Indexed color images
• 24 bits is too much for some applications
Especially when the image contains only a limited number of colors
(e.g., cartoon or logo)
• Solution: instead of representing a color with 24 bits give
as input the color “index” or number of this color
How many colors need to be displayed at a time? N
How many bits are needed to represent this number? n = log2(N)
For N=256, n=8
• For every pixel the color “index” or the color number is
saved with only n bits
P02_33
Indexed color images
color 2 (20,150,200)
color 3 (0,200,150)
color 253 (200,0,20)
color 1 (120,60,80)
color 0 (200,100,0)
color 254 (255,255,255)
P02_34
Indexed color images
• Color-look-up (CLT) table gives the relationschip
between the color index and the true color
RED GREEN BLUE
0 200 100 0
1 120 60 80
2 20 150 200
3 0 200 150
4 50 100 150
… … … …
… … … …
253 200 0 20
254 255 255 255
255 0 0 200
24 bits
N =
2n p
ositions
color nr. 0 color nr. 1 color nr. 2
etc.
color nr. 255 color nr. 254 color nr. 253
P02_35
Problems with CLT
P02_36
• It can be difficult to exchange raw image data and/or color map tables between different image files (intermediate mapping needed).
• If the original color palette for a given indexed image is lost, it can be nearly impossible to restore it.
A typical indexed 256-color image and a result of restoring it with a wrong color palette
[http://en.wikipedia.org/wiki/Indexed_color]
Summary
• Digital images are of finite resolution (intensity, spatial,
temporal)
• Vector and raster graphics have each their advantages in
certain applications
• By mixing R, G and B primaries in the right proportions
all colors can be reproduced
• Indexed color palettes interesting in many practical
applications, especially for „cartoon-like‟ images (with
piece-wise uniform colors) and logo‟s
P02_37
Top Related