Lecture 8 - Images and Colors

Images and Color
By Fareed Ahmed Jokhio

Images and Color
• In this lesson we will study the fundamentals
underlying Images, look at popular Image file
formats.
• Various image and video representations use
different color models.
• Some are based on human perception of color.
Images and Color
• We will look at the human perception of color
in both qualitative and more importantly
quantitative terms.
• We will look at the motivation behind the
color models in use today and how they have
been arrived at.
Graphics: Terminology
• First lets take care of some terminology.
• Pixel, short for a picture element is the smallest
unit of an digital image
• Image Resolution- The resolution of images are
expressed in terms of number of pixels,
however, images being two dimensional, it is
customary to express the resolution as X by Y,
for example 640X480 which is 640 columns by
480 rows, or height x width, or columns x lines.
• Image Resolution – number of pixels in a digital
image (Higher resolution always yields better quality)
– Width x height (e.g., 640x480)
– Most common Aspect ratio: 3:4 (lines:columns)
– Dots (pixels) per inch, dpi or ppi (e.g., 72 dpi)
• Another way of expression of the resolution is to use
the aspect ratio which is the ratio of the lines to the
columns.
• These opposite definitions often cause confusion.
• Bit-Map – a representation for the graphics /
image data in the same manner as they are
stored in video memory.
• Bits/pixel – also contributes to the quality of
the image.
Monochrome vs. Grayscale
• Monochrome • Grayscale
• Each pixel is stored as • Each pixel is usually
a single bit (0 or 1) stored as a byte
• A 640x480 (value between 0 to
monochrome image 255)
requires 37.5 KB of • A 640x480 grayscale
storage. image requires over
300 KB of storage
Grayscale image of Lena
Dithering
• Dithering is often used for displaying
monochrome images
• Creating the illusion of new colors and shades by
varying the pattern of dots.
• Newspaper photographs, for example are
dithered.
• If you look closely, you can see that different
shades of gray are produced by varying the
patterns of black and white dots.
Dithering
• There are no gray dots at all
• The more dither patterns that a device or program
supports, the more shades of gray it can represent.
• In printing, dithering is usually called halftoning,
and shades of gray are called halftones.
• Note that dithering differs from gray scaling.
• In gray scaling, each individual dot can have a
different shade of gray.
Color images (24 bit vs 8 bit)
• 24-bit:
• Each pixel is represented by three bytes (e.g., RGB)
• Supports 256x256x256 possible combined colors
(16777216)
• A 640 x 480 24-bit color image would require 921.6 KB
of storage
• Many 24-bit color images are stored as 32-bit images,
the extra byte of data for each pixel is used to store an
alpha value representing special effect information.
• 8-bit:
• One byte for each pixel
• Supports 256 out of the millions colors
possible, acceptable color quality
• Requires Color Look-Up Tables (LUTs) – Pallete
• A 640 x 480 8-bit color image requires 307.2
KB of storage (the same as 8-bit grayscale)
Image formats (System Independent)
• GIF (GIF87a, GIF89a):
• Graphics Interchange Format (GIF) devised by the
UNISYS Corporation and Compuserve, initially for
transmitting graphical images over phone lines via
modems.
• Uses the Lampel-Ziv Welch algorithm (Compression).
• Supports only 8-bit (256) color images.
• Supports interlacing.
• GIF89a supports simple animation
• JPEG
• A standard for photograpic image compression created
by the Joint Photographics Experts Group.
• Takes advantage of limitations in the human vision
system to achieve high rates of compression
• Lossy compression which allows user to set the desired
level of quality/compression.
• JPEG has some advanced modes that allow interlacing
and progressive scanning however they are optional
and therefore do not constitute the baseline JPEG.
• TIFF:
• Tagged Image File Format (TIFF), stores many different types
of images (e.g., monochrome, grayscale, 8-bit & 24-bit RGB,
etc.)
• Developed by the Aldus Corporation in the 1980’s and later
supported by Microsoft.
• TIFF is a lossless format (when not utilizing the new JPEG tag
which allows for JPEG compression)
• It does not provide any major advantages over JPEG and is
not as user-controllable it appears to be declining in
popularity.
• Graphics Animation Files:

• FLC– main animation or moving picture file
format, originally created by Animation Pro
• FLI– similar to FLC
• GL– better quality moving pictures, usually
large file sizes.
• Postscript/PDF:
• A typesetting language which includes text as
well as vector/structured graphics and bit-
mapped images.
• Used in several popular graphics programs
(Illustrator, FreeHand).
• Does not provide compression files are often
large.
Image formats (System Dependent)
• Windows (BMP):
• A system standard graphics file format for
Microsoft Windows.
• It is capable of storing 24-bit bitmap images.
• Used in PC Paintbrush and other programs.
• Macintosh (PAINT, PICT):
• PAINT was originally used in MacPaint
program, initially only for 1-bit monochrome
images.
• PICT format is used in MacDraw (a vector
based drawing program) for storing structured
graphics
• X-windows (XBM):
• Primary graphics format for the X-Window
system
• Supports 24-bit color bitmap
• Many public domain graphic editors, e.g., XV
• Used in X-Windows for storing icons, pixmaps,
backdrops, etc.
PNG File Format
• The Portable Network Graphics (PNG) format
was designed to replae th eolder and impler
GIF format and, to some extent, the much
more complex TIFF format.
PNG File Format
• The two-dimensional interlacing used in PNG does not
render the image faster than GIF, as a matter of fact
the rendering time of both formats is the same.
• However, PNG renders a small fraction of the total
image first and slowly refines the image in subsequent
passes until the entire image is rendered.
• Whereas interlaced GIF would render entire lines of
the image skipping neighboring lines and then coming
back in the subsequent passes to render skipped lines.
PNG File Format
• Advantages over GIF:
• Alpha channels (variable transparency)
• Also known as a mask channel, it is simply a way to
associate variable transparency with an image.
• Gamma correction (cross-platform control of image
brightness)
• Two-dimensional interlacing (a method of
progressive display)
• Better Compression (5-25% better)
Color in Images and Video
• Basics of Color
• Light and Spectra
• Visible light is an electromagnetic wave in the
400 nm – 700 nm range.
• Most light we see is not one wavelength, it’s a
combination of many wavelengths.
• The graph shows the various wavelengths that make
up the visible spectrum and their amplitudes.
• The Human Retina
• The eye functions on the same principle as a
camera
• Each neuron is either a rod or a cone.
• The rods contain the elements that are
sensitive to light intensities.
• Rods are not sensitive to color.
• Cone come in 3 types: red, green and blue.
Each responds differently to various
frequencies of light.
• The following figure shows the spectral-
response functions of the cones and the
luminous-efficiency function of the human
eye.
• What we see in the picture is the sensitivity of
the human eye to each of the colors that
combine to form the various wavelengths of
visible light.
• We also note that the human eye is more
sensitive to the luminosity content or
brightness of the light than its color
components.
Color Composition
• A color can be specified as the sum of three
colors.
• So colors form a 3 dimensional vector space.
• The following figure shows the amounts of
three primaries needed to match all the
wavelengths of the visible spectrum.
Color Composition
Color Composition
• Lets now take a look at what is the
composition of the various wavelengths in
terms of the three components red blue and
green.
• This is different from the human perception or
sensitivity, this is simply the composition of
light.
Color Models for images
• RGB Additive Model
• CRT displays have three phosphors (RGB) which
produce a combination of wavelengths when
excited with electrons.
• A color image is a 2-D array of (R,G,B) integer
triplets.
• These triplets encode how much the
corresponding phosphor should be excited in
devices such as a monitor.
• CMY Subtractive Model
• Cyan, Magenta, and Yellow (CMY) are
complementary colors of RGB.
• CMY model is mostly used in printing devices
where the color pigments on the paper absorb
certain colors (e.e., no red light is reflected
from cyan ink).
• RGB Additive Model
• CMY Subtractive Model
Color Models for Video
• YUV Model
• Human perception is more sensitive to
luminance (brightness) than chrominance
(color).
• Therefore, instead of separating colors, one
can separate the brightness information from
the color information.
• YUV Model
• Y is luminance
– Y = 0.299R + 0.5876G + 0.114B
• Chrominance is defined as the difference between a
color and a reference white at the same luminance.
• It can be represented by U and V – the color
differences
–U=B–Y
–V=R–Y
• YUV Model
• Eye is most sensitive to Y.
• Therefore, only error in the resolution of the
luminance (Y) is more important than the
chrominance (U, V) values.
• In PAL5 (or 5.5) MHz is allocated to Y, 1.3 HMz
to U and V.
• CD-I and DVI also use the YUV model.
• YIQ Model
• Although U and V nicely define the color
differences, they do not align with the desired
human perceptual color sensitivities.
• Hence, I and Q are used instead.
• I = 0.74 (R-Y) – 0.27 (B-Y)
• = 0.596R – 0.275G – 0.321B
• Q = 0.48(R-Y) + 0.41(B-Y)
= 0.212R – 0.523G + 0.311B
• YIQ Model
• YIQ is used in NTSC color TV broadcasting, it is
downward compatible with B/W TV where
only Y is used.
• Eye is most sensitive to Y, next to I, next to Q.
In NTSC broadcast TV. 4.2 MHz is allocated to
Y, 1.5 MHz to I, 0.55 MHz to Q.
Color summary
• Color images are encoded as triplets of values.
• RGB is an additive color model that is used for
light-emitting devices, e.g., CRT displays.
• CMY is a subtractive model that is used often for
printers.
• Sometimes, on alternative CMYK model (K stands
for Black) is used in color printing (e.g., to produce
darker black than simply mixing CMY).
• K:=min(C, M,Y); C:=C-K; M:=M-K; Y:=Y-K.
Color summary
• Two common color models in imaging are RGB
and CMY, two common color models in video are
YUV and YIQ.
• YUV uses properties of the human eye to
prioritize information.
• Y is the black and white (luminance) image, U
and V are the color difference (chrominance)
images.
• YIQ uses similar idea.

Lecture 8 - Images and Colors

Uploaded by

Lecture 8 - Images and Colors

Uploaded by

Images and Color

By Fareed Ahmed Jokhio

• Graphics Animation Files:

You might also like

zproxy.org