Graphics/Images

• A digital image contains 2D samples of a surface,

which can be represented as matrices
• Each sample in an image is called a pixel
• A pixel is the smallest image component and thus
shows the smallest detail
• Each pixel contains values representing a particular
color
 Pixels
• Each pixel is given a
numerical value that
represents the
corresponding color
 Where to get digital images
• By scanning existing images (a drawing or an
old photograph or a painting)
• By taking a picture with our digital camera
• By creating something original using MS Paint
or Photoshop or some graphics program
 Converting Analog to Digital
• Analog to digital image conversion is a 2 step
process
• Sampling:
– how often do I take a sample (measurement) to
represent the image
– how many parts will I break the thing up into
• Quantizing:
– how many discrete values will I use to represent
the parts of the image
Sampling for Images
 Original Image

image with 4
samples
(2x2)
Sampling
image with
8x8 samples

Image with
88X88 samples
 Quantizing for Images
represent the color of each square with 1 bit
(only 2 colors)

represent the color of each square with 4 bit

(16 colors)

24 bits to represent the color of each square

(about 16 million colors)

NOTE: all these images have the exact same number of samples
 Spatial Resolution
• A measure of the smallest discernible detail in an image
• When scanning or getting an image from our digital
camera, the scanner or the camera can determine how
many samples to take (how finely to break down the
images)
• The more samples that are taken, the higher the resolution
will be.
• Given in terms of dots(pixels) per inch
– Samples on scanners/printers are measured as dots per inch
(DPI)
– Samples on a monitor are measured as pixels per inch (PPI)
 Example
• If we scan an 8 inch by 10 inch image at
100dpi, the image will be (8*100) * (10*100) =
800*1000 = 800,000 samples (almost 1 million
samples).
• QUESTION: What do we call a sample in an
image?
• Thus the above image would have 800,000
pixels.
 Example
• If we scan the same image,8 inch by 10 inch,
at a resolution of 300dpi
– after scanning, we will get (8 * 300) * (10 * 300) =
7,200,000 pixels (about 7 million pixels)
• NOTE: when printing an image, you should
print with a dpi of at least 300.
 Pixels in Digital Cameras
• How many megapixels (millions of pixels) you
can capture in a photograph on your digital
camera
• A table below shows relation between
megapixels and image sizes in digital cameras
Megabytes Size of image Total # of Printing at 300dpi,
(pixels WxH) Pixels biggest suggested print

1 Megapixel 1280 X 960 1,228,800 4.2” by 3.2 “

2 Megapixels 1600 X 1200 1,920,000 5.3” by 4 “
3 Megapixels 2048 X 1536 3,145,728 6.8” by 5.1”
4 Megapixels 2272 X 1704 3,871,488 7.5 by 5.6 “
5 Megapixels 2560 X 1920 4,915,200 8.5” by 6.4”
 Pixels in Digital Cameras
• Thus, a camera with more megapixels can print a
larger image without the human eye detecting a loss
of quality.
• If you just want to print 6” by 4” images, you don’t
need much more than 3 megapixels
 Printing Images on Paper
• When printing an image, the image must be printed
at a size that has a minimum of 300 pixels per inch.
• QUESTION: Thus if you had an image that was
3000 pixels by 1500 pixels, for the print quality to
be good enough to the human eye, what size
should you print it at?
• Answer:
– 3000/300  10 inches by 1500/300  5 inches.
– DON’T PRINT IT ANY LARGER THAN 10” by 5”
 Review Questions
1. How many pixels is an image that is 800 pixels
by 800 pixels?
2. How many megapixels is that image?
3. How big would this picture be if you printed it
out at 200 dpi?
4. How big would this picture be if you printed it
out at 100 dpi?
5. How many colors can you represent with 4 bit?
 Intensity Level Resolution
• Intensity level resolution refers to the number
of intensity levels used to represent the
image.
– The more intensity levels used, the finer the level of detail
discernable in an image
– Intensity level resolution is usually given in terms of the
number of bits used to store each intensity level
Number of Intensity
Number of Bits Examples
Levels
1 2 0, 1
2 4 00, 01, 10, 11
4 16 0000, 0101, 1111
8 256 00110011, 01010101
 Intensity Level Resolution
• 1 bit per pixel (binary image)
 Intensity Level Resolution
• 2 bit per pixel (gray scale image)
 Intensity Level Resolution
• 4 bit per pixel
(gray scale image)
0000 0001 1111
 Intensity Level Resolution
• 8 bits per pixel (gray scale image)
 File Size for Images
• The size and quality of uncompressed images
depend on
– Spatial resolution of an image (number of pixels)
– Intensity level resolution (also called bit depth)
 Graphics/Image Data Types
• Binary Image
• Gray Scale Image
• True Color Image
• 8-bit Color Image
 Binary Image
• Also referred as 1-bit image
• Each pixel is stored as a single bit (0 or 1)
• Use for pictures containing simple graphics or text
• A 640 × 480 binary image requires 37.5 KB of storage
 Gray Scale Image
• Also referred as 8-bit Images
• Each pixel is represented by a single byte
• Each pixel has a gray-value between 0 & 255
• A 640 × 480 grayscale image requires 300 KB
of storage
 True Color Images
• Also referred as 24-bit Color Images
• Each pixel is represented by three bytes, usually RGB
– supports 256 × 256 × 256 possible colors.
– A 640 × 480 24-bit color image would require 921.6 KB of
storage without any compression
• Some 24‐bit color images are stored as 32‐bit image
– Extra byte of data for
special‐effect information
 8-bit Color Image
• Only 256 colors
• Use the concept of a lookup table to store color
information.
• The image stores not color, but a set of indexes into a
table
 Bitmapped Images Vs. Vector Graphics

• Bitmapped Graphic Image

– Image consists of pixels in a grid
– When bitmapped images are enlarged, the
computer adds new pixels and guesses on the
color to color the new pixels based on surrounding
pixels

◦ 32 pixels by 32 pixels

◦ 245 pixels by 245 pixels

 Bitmapped Graphic Image
• Also called raster graphics image
• Bitmapped images are resolution dependent
– Bitmapped image on a 640 by 480 screen appear larger
than on a 1280 by 1024 screen
• Bitmapped images that are enlarged:
– Have larger file size than original
– Become distorted
• All images from scanners and digital cameras are
bitmapped images
 Common Bitmap Formats
• Common bitmap file formats are:
– BMP
– GIF
– JPEG, JPG
– PNG
– PICT (Macintosh)
– PCX
– TIFF
– PSD (Adobe Photoshop)
• Popular bitmap editing tools/software packages:
– Microsoft Paint
– Adobe Photoshop
– Corel Photo-Paint, Corel Paint Shop Pro
– The Gimp
 Vector Graphics
• Vector image is made up of individual, scalable
objects.
• Objects are defined by mathematical equations
• Objects consist of lines, curves and shapes
• No distortion as image is enlarged
 Vector Graphics
• Most browsers don’t display vector graphics without
a plug in.
• Only can be used with drawings, not photographs
• Usually vector graphic image has a smaller file size
than the same image stored as a bitmap.
• Below: enlarging and shrinking an image: left using a
vector graphical image, right using a bitmapped
 Common Vector File Formats
• Common Vector file formats include:
– AI (Adobe Illustrator)
– CDR (CorelDRAW)
– CMX (Corel Exchange)
– CGM Computer Graphics Metafile
– DXF AutoCAD
– WMF Windows Metafile
– EPS (Encapsulated PostScript)
• Popular vector drawing programs/software packages are:
– Adobe Illustrator
– CorelDRAW
– Xara Xtreme
– Serif DrawPlus
 How do we pick the most appropriate file
format?
• Depends on what type
of image we are
representing
• How many colors do
you think were used in
this image:
• How many colors do
you think were used in
this image:
 Depends on type of image!
• The type of image we are trying to compress
will determine the best file format to choose!
• 3 file formats we will look at:
– GIF
– JPG
– PNG
GIF (Graphic Interchange Format)
• Widely used on the World Wide Web
• Cross Platform (works on Macs, Windows)
• Supports 8 bit colour
– Not great for photographs but good for clipart,
logos, animation
 GIF
• Produces smaller file sizes than jpgs
• Does a lossless compression:
– Assume we have an image that is
• 200 by 200 pixels
• If the original image had 256 colours or less
– With no compression the file size would be:
200*200*3/1024 = 117 KB
– Same image, save as a gif:
• With 256 Colours  8.4 KB
• With 16 Colours (cant pick less than 9 in Photoshop)
 5 KB
• NOTICE: NO CHANGE IN QUALITY, LOSSLESS
COMPRESSION!
Transparency
• Allows for transparency of
ONE colour
• Background will show
through:

GIF  Transparency
 GIF  Animation
• Allows for animation
• Don’t need a plug in for gif animation!
• Works in all browsers, universal format!
 GIF  Dithering
• Allows for dithering:
• Question: What do you think a program, that
converts images into gifs does, if the image
has more than 256 colors?
– Solution 1: Substitute one of the colors you have
for one of the colors you are missing
– Solution 2: dithering
 GIF  Dithering
• Juxtaposing (place side by side) pixels of two colors to
create the illusion that a third color is present (grainy
look)
• Example:
◦ Assume our image uses 257 colours
◦ The 257th colour that is not in our palette is:
◦ Assume we do have these 2 colours: and
◦ Thus dithering will change this 

◦ To this 
Another Example of Dithering
 GIF  Interlacing
• How images are downloaded to
your screen
• Interlacing lets you have a feel
for the whole picture, you
don’t have to wait around to
see it download (good for dial
up connections)
• a process by which the
image is drawn in a series of
passes rather than all at the
same time (file size bigger)
 JPG (JPEG) – Joint Photographic Experts
Group
• Widely used on the World Wide Web
• Cross Platform (works on Macs, Windows)
• Supports 24 bit colour
• Great for photographs
• Larger file sizes than GIFs BUT allows for a full
colour scheme!
 JPG
• Good for photographs, computer games, screenshots,
stills from a movie, etc
• Best for blends of color, softer shadow effects, subtle
changes in color
• Not good for well-defined lines or sharp contrasts
between colours
• Question: Guess which one is the GIF and which one is
the JPG:
 JPG
• JPG does a lossy compression
– Discards more data about colours than about
brightness
• Not all of the information in the original image is
preserved – not the same as the original
• Compression is achieved by ‘forgetting’ certain
details about the image, which the JPG will then
try to fill in later when it is being displayed
• Degree of amount of information LOST
(lossyness) can be varied by adjusting
compression parameters. (controlled by you)
Original  0%
Compression = 100%
JPG
Quality

• Quality of image is inversely

proportional to amount of
compression
• A higher image quality setting (has
a lower compression value) results
in less data being discarded.
 JPG
• No Transparency
• No Animation
• No Interlacing
• No dithering (Question: why no dithering)
 PNG (Portable Network Graphics)
• Pronounced PING
• Does LOSSLESS compression
• Two versions of PNG
– PNG-8
– PNG-24
 PNG-8
• Similar to GIF
• Only allows for 256 colours
• Allows for 1 transparent colour
• Storing of colours is more efficient in PNG files
than GIFS thus PNG-8 files might be SMALLER
than their GIF counterparts
 PNG-24
• Allows for 24 bit colour
• It is LOSSLESS so JPG files will be smaller than
the same image saved as PNG-24 file
• Allows for transparency on each pixel, with
different levels of opacity:
 Comparison of GIF, JPG, PNG
GIF JPG PNG-8 PNG-24
Best For Logos, Photographs Logos, Cartoons, Photograph
Cartoons, Drawings Images with a
Drawings need for
transparency
Type of Lossless Lossy Lossless Lossless
Compression
Well Supported All All All Not on IE6
in Browsers
Transparency One COLOUR NO One COLOUR Varying levels
only only of opacity and
transparency
Animation Yes No No No
Dithering Yes No Yes No
Interlacing Yes No Yes Yes
Shape of image Must be
rectangular
 Warm up Question:

• Question: Match the following images to the

correct file format:

1. GIF

2. PNG

3. JPG