what you’ll learn today · cs101 lecture 15: image compression 2 what you’ll learn today...
TRANSCRIPT
1
1
Aaron Stevens23 February 2011
Some material form Wikimedia CommonsSpecial thanks to John Magee and his dog
CS101 Lecture 15:Image Compression
2
What You’ll Learn Today
– Review: how big are image files?– How can we make image files smaller?– What are the main image file formats, and
how are they different from each other?– What are the main techniques for
compressing images?
2
3
Image File Size: HUGE!
Raster/Bitmap GraphicsStorage of data on a pixel-by-pixel basis
– Bitmap (BMP), GIF, JPEG, and PNG, for example
How much data is required to represent apicture?
– Typical size might be 1024 by 768 pixels (~ 800,000)– At 3 bytes per pixel, about 2,400,000 bytes for one picture.
– A 10Mpixel picture would be 30,000,000 bytes per picture.
4
Consider download times…
Example:– A 10Mpixel picture would be 30,000,000 bytes– This is 240,000,000 bits.– Typical home cable modem downloads at 5 Mbits per
second (5,000,000 bits per second).
How long to download this picture?– 240,000,000 / 5,000,000 = 48 seconds
• What factors make the image so big?
3
5
Describe this picture…
This image was a homework assignment by a CS108 student, Spring 2008.
Vector Graphicsdescribes an imageby coordinates,lines, geometricshapes and colors.
6
Vector Graphics Example
Instructions written in Python by CS108 student (Spring 2010).File size: 29743 bytes.
4
7
Vector Graphics
Advantages:– Small file sizes (instructions take much less space
than sampling pixels)– Easy to resize mathematically without loss of
detail
Disadvantages:– Image shapes are not lifelike– Color contrast and texturing are rigid, not lifelike– Requires software to interpret the drawing
instructions
8
Raster vs. Vector Graphics
When would you use each?
Drawings, Diagrams,Games, etc.
Photography,video, etc.
5
9
Storing an image in fewer bytes
What are our choices?What are reasonable tradeoffs?– Raster Graphics vs. Vector Graphics?– Decrease sampling rate (fewer pixels)– Decrease quantization (fewer colors)– Compression
10
Lower Image Resolution?
Original bitmap image dimensions:– 1524 * 2034 = 3,099,816 pixels– 3,099,816 pixels * 3 bytes = 9,299,448 bytes
How about 300 * 400 pixels?– 300 * 400 pixels = 120,000 pixels– 120,000 pixels * 3 bytes = 360,000 bytes
A compression ratio of 0.038.What’s the catch?
6
11
Fewer Colors: GIF Images
Graphics Interchange Format (GIF)Each image is made up of any 256 (or 16) RGBcolors, but only those colors. How does this affectquantization?– 256 colors: 8 bits per pixel– 16 colors: 4 bits per pixel
300 * 400 pixels16 Colors120,000 bytes
12
How About Fewer Colors?
16 Color GIF120,000 bytes
256 Color GIF200,000 bytes
Original BMP360,000 bytes
7
13
Data Compression(saving space)
Data compressionReduction in the amount of space needed tostore a piece of data.
Data compression techniques can be:lossless, which means the data can be retrieved
without any loss of the original informationlossy, which means some information may be lost in
the process of compaction
14
Lossless Compression Strategies
Recall:– Keyword encoding– Run-length encoding– Huffman encoding
How can we apply these to images?
8
15
PNG Image Format
Portable Network Graphics (PNG)24-bit bitmapped color. Uses losslesscompression.
2-stage compression process:1. Filter image by adjacent pixels,
record the differences2. Use the DEFLATE algorithm
(Huffman encoding scheme)
16
JPEG Images
The Joint Photographic Experts Groupcreated the standard codec in 1992,approved by ISO 10918-1 in 1994.
– Default format on most digital cameras– Compression reduces file size up to 90%
with little loss is visible quality– Great for life-like images the web
9
Recall:The RGB Colorspace
=
RGB has a lot of redundantinformation.
JPEG Uses theYCbCr Colorspace
=
Y is the luminance componentCb and Cr are the chromacomponents (blue, red)
10
19
JPEG and the YCbCr Colorspace
JPEG separates luma (brightness) fromchroma (color differences).– Our eyes are more sensitive to changes in
luma than to changes in chroma.
JPEG thus stores a high resolution Y,and lower-resolution CbCr.– Smoothing colors among adjacent pixels.
20
JPEG Color Smoothing
This image is progressively more smoothedfrom left to right (highest to lowest quality).
11
21
JPEG Compression
– Convert color space from RGB to YCbCr– Smooth adjacent colors in Cb/Cr– Apply Huffman compression after
smoothing
Which part of this is lossy compression?
22
Same Picture, Many Formats
Original image was2048 * 1536 pixels
All others are300 * 400 pixels
12
23
Image Manipulation Software
There are many different imagemanipulation software packages, e.g.:– Paint – Built in to windows– Photoshop – Commercial software– Irfanview – Free software– Paintshop Pro – Shareware/Commercial– GIMP – Free software
24
13
25
What You Learned Today– Factors in image file size– Compression strategies
• Reduce colors• Reduce resolution• Lossless compression• Lossy compression
– GIF, PNG, and JPEG Format Images
26
Student To Dos
–HW05 due Wednesday 2/23–Readings:
• Wong ch 1 pp 13-19, ch 2, pp 26-44 (this week)• Wong ch 3, pp 66-86 (today)
–Friday: guest speaker aboutcomputer vision