Digital Media
description
Transcript of Digital Media
![Page 1: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/1.jpg)
Digital Media
Lecture 4: Bitmapped images:Compression & Convolution
Georgia Gwinnett CollegeSchool of Science and Technology
Dr. Jim Rowan
![Page 2: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/2.jpg)
Bitmapped image compression
Consider this image:
With no compression...
RGB encoding => 64 x 3 = 192 bytes
64 pixels
![Page 3: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/3.jpg)
Bitmapped image compression
64 pixels
Color table representation:
With 2 colors:
#0 - 0 100 100#1 - 255 0 0
0 0 0 0 0 0 0 00 1 1 1 1 1 1 00 1 1 1 1 1 1 00 1 1 1 1 1 1 00 1 1 1 1 1 1 00 1 1 1 1 1 1 00 1 1 1 1 1 1 00 0 0 0 0 0 0 0
-6 bytes for the color table-64 X 1 = 64 / 8 = 8 bytesfor the pointer table
6 + 8 = 14 bytes total
![Page 4: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/4.jpg)
Bitmapped image compressionRun length encoding:
64 pixels
9RGB 6RGB 2RGB 6RGB 2RGB 6RGB 2RGB 6RGB 2RGB 6RGB 2RGB 6RGB 9RGB
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)
= 52 bytes
![Page 5: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/5.jpg)
Bitmapped image compressionRun length encoding:
RLE gets its advantage when there are a number of pixels next to one another that are the same color
This advantage is dependent on the CONTENT of the image.
Why?
Could RLE result in a larger image?
How?
![Page 6: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/6.jpg)
Bitmapped image compressionRun length encoding:
Consider this image:
64 pixels
RLE compression...
1RGB 1RGB 1RGB 1RGB1RGB... 1RGB 1RGB 1RGB
-> 256 bytes
![Page 7: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/7.jpg)
Bitmapped image compressionLossless or Lossy?
24 bit RGB encoding is lossless
What about table encoding?Lossless and lossyIt depends on…?
What about RLE encoding?Lossless
![Page 8: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/8.jpg)
Bitmapped image compressionJPEG
JPG is Lossy
Best suited for natural photographsFine 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
![Page 9: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/9.jpg)
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
The DCT is expensive computationally so the image is broken into 8x8 pixel squares and applied to each of the squares
Bitmapped image compressionJPEG
![Page 10: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/10.jpg)
The high frequency components do not contribute much to the perceptible quality of the image
So JPEG encodes these frequencies at different quantization levels…
The low frequency components are with greater detail than the high frequency changes.
==>JPEG uses more storage space for the more visible elements of an image
Bitmapped image compressionJPEG
![Page 11: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/11.jpg)
Why use a lossy compression technique?
It is effective for the kinds of images it is intended for ==> 95% reduction in size
But it suffers from artifacts like edges that blur...
WHY?
Can the difference be seen?
HMMMmmmm…
Bitmapped image compressionJPEG
![Page 12: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/12.jpg)
Bitmapped image compressionOriginal file zoomed in
![Page 13: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/13.jpg)
Bitmapped image compressionComparing tiff & jpeg
![Page 14: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/14.jpg)
Bitmapped image compressionJPEG
Again…Why use a lossy compression technique?
For this example:The original .tiff file is 1,300,000 bytesThe jpeg file is only 156,000 bytes
When viewing the two full size images you cannot see the minute differences
Only zooming in to the image shows the artifacts caused by jpeg compression
![Page 15: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/15.jpg)
Side Note!To make matters worse…
Humans are a mess!
The human vision system is very complexUpside downSplit- left side of eye to right side of brainRight side of eye to left side of brainCones and rods not uniformly distributedCones 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 ==>
![Page 16: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/16.jpg)
Optical illusions
Humans are a mess!
See Additional Class Information: Illusions
![Page 17: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/17.jpg)
Bitmapped image compressionreturning to
Resizing issues…
![Page 18: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/18.jpg)
Resizing issuesHere the original 4x4 imageis doubled in both dimensions to 8x8 by adding pixels
But this example is pretty simple because the original is all one color…
![Page 19: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/19.jpg)
Resizing issuesIf you double both dimensionsyou have to add pixels...But what color?
?
Well, the answer is… it depends!
?? ?
![Page 20: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/20.jpg)
Resizing issuesIf you double both dimensionsyou have to add pixels...But what color?
?
The simplest approach would be to copy the color but…You can consider the colors that surround the original pixel
?? ?
![Page 21: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/21.jpg)
Resizing issues
If you cut each of the dimensions in half you remove…(8x8 -> 4x4)=> 64 - 16 = 48 pixels
You have to remove 3/4 of the pixels!
64 pixels 16 pixels
How do you decide which pixels to remove?
![Page 22: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/22.jpg)
Resizing issues
One answer: throw them away!Here it works... but onlybecause it is a solid color
1
2
3
![Page 23: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/23.jpg)
Resizing issuesBut 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!
1
2
3
![Page 24: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/24.jpg)
ConvolutionUnderlies much of bitmapped image processing including downsizingand filters like blur and sharpen
1
2
3
![Page 25: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/25.jpg)
Go to 4.1 STEM presentation…
![Page 26: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/26.jpg)
Blur filter: Convolution under the sheets
![Page 27: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/27.jpg)
Convolution: How it works
Images as piles of numbers: Art and Mathematics Collide! (of Bezier Curves and Convolution)
Images are collections of numbers
![Page 28: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/28.jpg)
Convolution: How it works
Convolution uses a convolution matrix (in this case 3 X 3) toprocess the original image one pixel at a time
![Page 29: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/29.jpg)
Convolution: How it works
Resulting in a completely new image… But how?
![Page 30: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/30.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255` 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 31: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/31.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9 X
255` 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 32: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/32.jpg)
Convolution: How it works0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
X
255` 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 33: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/33.jpg)
Convolution: How it works0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0/9 x 255 + 3/9 x 255 + 0/9 x 255 +0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 =
0 + 85 + 0 +0 + 85 + 0 +0 + 85 + 0 = 255
![Page 34: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/34.jpg)
Convolution: How it works0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
X
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 35: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/35.jpg)
Convolution: How it works0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
170
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0/9 x 255 + 3/9 x 255 + 0/9 x 255 +0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 0+ 3/9 x 0 + 0/9 x 0=
0 + 85 + 0 +0 + 85 + 0 +0 + 0 + 0 = 170
![Page 36: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/36.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
170
X
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 37: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/37.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
170
170
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0/9 x 255 + 3/9 x 255 + 0/9 x 255 +0/9 x 0 + 3/9 x 0+ 0/9 x 0+ 0/9 x 255 + 3/9 x 255 + 0/9 x 255 =
0 + 85 + 0 +0 + 0 + 0 +0 + 85+ 0 = 170
![Page 38: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/38.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
170
170
X
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 39: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/39.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
170
170
170
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0/9 x 0 + 3/9 x 0 + 0/9 x 0 +0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 =
0 + 0 + 0 +0 + 85+ 0 +0 + 85+ 0 = 170
![Page 40: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/40.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
170
170
170
X
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 41: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/41.jpg)
Convolution: How it works
0/9 3/9 0/9
0/9 3/9 0/9
0/9 3/9 0/9
255
170
170
170
255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0/9 x 255 + 3/9 x 255+ 0/9 x 255 +0/9 x 255 + 3/9 x 255 + 0/9 x 255 + 0/9 x 255 + 3/9 x 255 + 0/9 x 255 =
0 + 85 + 0 +0 + 85 + 0 +0 + 85+ 0 = 255
![Page 42: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/42.jpg)
Convolution: How it works
255 255 255 255 255
170 170 170 170 170
170 170 170 170 170
170 170 170 170 170
255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
0 0 0 0 0 0 0
255 255 255 255 255 255 255
255 255 255 255 255 255 255
255 255 255 255 255 255 255
![Page 43: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/43.jpg)
Convolution: How it works
In short…– the math is simple– there’s a lot of multiplication– there’s a lot of addition– just keeping track of where you are is
really the only issue here!
![Page 44: Digital Media](https://reader035.fdocuments.net/reader035/viewer/2022062812/56816332550346895dd3b8e0/html5/thumbnails/44.jpg)