Digital Media
Dr. Jim Rowan
ITEC 2110
Bitmapped Images
Bitmapped images have problems scaling
Vector graphics do not have scaling issues
Resolution is detail
• The x and y dimensions of the image can be
seen as a measure of how much DETAIL is
contained in the picture
• Many image formats encode these
dimensions by putting in the header (as we
saw in the first day demonstration)
• The color depth determines how many colors
this detail can assume
Device Resolution
affects
Display Size
• Is the image smaller than you thought?
• Same image, displayed at different resolutions
What happens when you
increase resolution?
• For example, to go from 72 dpi to 144 dpi
– AKA upsampling
• Must scale it up...
• To do that, you must add pixels…
• This requires interpolation between pixels
For example, to go from 4x4 to 8x8 ==>
Here the original 4x4 image
is doubled in size to
8x8 by adding pixels
But this example is pretty simple because the original is
all one color…
If you double the image size
you have to add pixels...
But what color do you make
the additions?
?
Well, the answer is… it depends!
You can consider what
the colors are that surround
the original pixel
Mathematically this usually
takes the form of matrix operation
?
Decrease Resolution…
Must discard some pixels...
– AKA downsampling
Downsampling: Presents a paradox
– There are fewer bits since you’re throwing some pixels
out
– But... subjective quality goes up
– How? Downsampling routine can use the tossed-out
pixels to modify the remaining pixel
• Intentionally doing this is called oversampling
For example ==>
If you cut each of the dimensions
in half (8x8 -> 4x4)=> 64 - 16 =
48 pixels removed
You have to remove 3/4 of the
pixels!
64 pixels
16 pixels
How do you decide which pixels to remove?
One answer: throw them away!
Here it works...
because it is a solid color
Another answer:
But what if it is multi-colored?
You can use the information
in the surrounding pixels to
influence the remaining pixel
How do you do this?
Remember… it’s just numbers in there!
Convolution Calculations
Convolution is the mathematical process
that image software (like GIMP or
Photoshop) use to do these things
(More of this in the next lecture)
Browsers...
generally bad at downsampling
• Their image processing is not very
sophisticated
• What are the implications?
– Use image processing programs to do
downsampling
• (GIMP, Photoshop) are sophisticated enough to
take advantage of the extra information so...
• Images for WWW should be downsampled
before they are used on the web.
Data Compression
• What we’ve seen so far:
– Storing an image as an array of pixels
– With color stored as three bytes per pixel
– Image file gets BIG fast!
• How to reduce that?
• Using a color table reduces the file size of the
stored image (as seen before)
• So let’s talk about compression techniques==>
Data Compression
Consider this image:
With no compression...
RGB encoding =>
64 x 3 = 192 bytes
64 pixels
Side Note 1
We’ve been talking about RGB encoding
for images…
So…
How many different colors can you make
if using a 24 bit RGB color scheme?
Side Note 2
24 bits ===> How many colors?
2**24 = 16,777,216 different colors
Now back to compression techniques ==>
Data Compression
Table (or dictionary)
with just two colors:
Consider this image:
64 pixels
0
100
100
255
0
0
00000000
01111110
01111110
01111110
01111110
01111110
01111110
00000000
==>
14 bytes
or
112 bits
Data Compression
Run Length Encoding
Consider this image:
RLE compression...
9RGB6RGB2RGB6RGB2RGB
6RGB2RGB6RGB2RGB6RGB
2RGB6RGB9RGB
9(0,0,255)6(255,0,0)2(0,0,255)6(255,0,0)2(0,0,255)6(
255,0,0)2(0,0,255)6(255,0,0)2(0,0,255)6(255,0,0)2(0,0
,255)6(255,0,0)9(0,0,255)
64 pixels
= 52 bytes
Run Length Encoding
• This advantage would be dependent on the
CONTENT of the image.
• Why?
• Could RLE result in a larger image?
• How?
Run Length Encoding:
Always better than RGB?
Consider this image:
RLE compression...
1RGB1RGB1RGB1RGB1RGB.
.. 1RGB1RGB1RGB
-> 256 bytes
64 pixels
Run Length Encoding
• RLE is Lossless
• What is lossless?
Original
compression
routine
Exact
duplicate
Original
compressed
original
decompress
routine
Dictionary-based
(aka Table-based)
compression technique
• (Note: Data compression works on files other than
images)
• Construct a table of strings (for images, colors) found in
the file to be compressed
• Each occurrence in the file of a string (for images, color)
found in the table is replaced by a pointer to that
occurrence.
• Lossless ONLY if all the colors are in the color
table
Lossless techniques
Can be used on image files
color table can be lossless
(if the color table holds all colors in the
image)
One lossless technique is a zip file
Run length encoding is also lossless
• A lossless technique must be used for
executable files
JPEG compression
• JPG is Lossy
• Best suited for natural photographs and
similar images
– Fine details with continuous tone changes
• JPEG takes advantage of the fact that
humans don’t perceive the effect of high
frequencies accurately
(High frequency components are associated with abrupt changes in
image intensity… like a hard edge)
JPEG compression...
• JPEG finds these high frequency components
by
– treating the image as a matrix
– using the Discrete Cosine Transform (DCT) to
convert an array of pixels into an array of
coefficients
• DCT is expensive computationally so it the
image is broken into 8x8 pixel squares and
applied to each of the squares
JPEG compression...
• The high frequency components do not
contribute much to the perceptible quality of
the image
• They encode the frequencies at different
quantization levels giving the low frequency
components greater detail
• ==>JPEG uses more storage space for the
more visible elements of an image
JPEG compression...
• Lossy
• Effective for the kinds of images it is
intended for ==> 95% reduction in size
– Allows the control of degree of
compression
• Suffers from artifacts that causes edges
to blur... WHY?
• HMMMmmmm…
One reason lossy compression
works… we just don’t notice it!
Side Note!
To make matters worse…
• The human vision system is very complex
–
–
–
–
–
Upside down
Split- left side of eye to right side of brain
Right side of eye to left side of brain
Cones and rods not uniformly distributed
Cones and rods are upside down resulting in blind
spots in each eye that we just ignore!
Partially responsible for making lossy
techniques work… you don’t see what
you think you see ==>
Optical Illusions
• See Additional Class Information: Illusions
Bitmapped image manipulation
• Like GIMP and Photoshop…
• Pixel point processing
just deal with each single pixel individually
• Pixel group processing
each pixel is influenced by the pixels that
surround it
• Adjustment of color in an image is pixel
point processing
• Color adjustment
– brightness
• adjusts every pixel brightness up or down
– contrast
• adjusts the RANGE of brightness
• increasing or reducing the difference between
brightest and darkest areas
Rescaling a bitmapped image is called resampling:
Two kinds
Downsampling
Upsampling
Pixel group processing
Different ways to do this that result in different results
Nearest Neighbor, bilinear & bicubic
Pixel Group Processing
• Final value for a pixel is affected by its
neighbors
• Because the relationship between a
pixel and its neighbors provides
information about how color or
brightness is changing in that region
• How do you do this?
• ==> Convolution!
Convolution &
Convolution Masks
• Very expensive computationally
– each pixel undergoes many arithmetic
operations
• If you want all the surrounding pixels to
equally affect the pixel in question...
• You need an image and a mask
– Then apply the mask to the image
Visually it looks like
1/9 1/9 1/9
1/9 1/9 1/9
X
1/9 1/9 1/9
Convolution
mask
Convolution
kernel
Using this convolution mask
on this convolution kernel
the final value of the pixel (2,2)
will be:
pixel (2,2) = 1/9(1,1) + 1/9(1,2)+ 1/9(1,3)
+1/9(2,1) +1/9(2,2) +1/9(2,3)
+1/9(3,1) +1/9(3,2) +1/9(3,3)
X
1/9 1/9 1/9
1/9 1/9 1/9
X
1/9 1/9 1/9
Convolution
mask
Using this convolution mask
on this convolution kernel
the final value of the pixel (3,2)
will be:
pixel (3,2) = 1/9(1,2) + 1/9(1,3)+ 1/9(1,4)
+1/9(2,2) +1/9(2,3) +1/9(2,4)
+1/9(3,2) +1/9(3,3) +1/9(3,4)
X
1/9 1/9 1/9
1/9 1/9 1/9
X
1/9 1/9 1/9
Convolution
mask
Using this convolution mask
on this convolution kernel
the final value of the pixel (4,2)
will be:
pixel (4,2) = 1/9(1,3) + 1/9(1,4)+ 1/9(1,45)
+1/9(2,3) +1/9(2,4) +1/9(2,5)
+1/9(3,3) +1/9(3,4) +1/9(3,5)
X
1/9 1/9 1/9
1/9 1/9 1/9
X
1/9 1/9 1/9
Convolution
mask
Using this convolution mask
on this convolution kernel
the final value of the pixel (5,2)
will be:
pixel (5,2) = 1/9(1,4) + 1/9(1,5)+ 1/9(1,6)
+1/9(2,4) +1/9(2,5) +1/9(2,6)
+1/9(3,4) +1/9(3,5) +1/9(3,6)
X
1/9 1/9 1/9
1/9 1/9 1/9
X
0/9 3/9 0/9
You can use a
different
Convolution
mask and get
different results
X
X
X
X
Image Encoding Practice
Powerpoint slides found on the wiki in
“additional class information”
Convolution Calculations
Pixel Group Processing
Next class we will do some more of these
Questions?