CS101 Lecture 18: Image Compression Aaron Stevens 21 October 2010 Some material form Wikimedia Commons Special thanks to John Magee and his dog 1 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 1
Image File Size: HUGE! Raster/Bitmap Graphics Storage of data on a pixel-by-pixel basis Bitmap (BMP), GIF, JPEG, and PNG, for example How much data is required to represent a picture? 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. 3 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? 4 2
Describe this picture Vector Graphics describes an image by coordinates, lines, geometric shapes and colors. This image was a homework assignment by a CS108 student, Spring 2008. 5 Vector Graphics Example Instructions written in Python by CS108 student (Spring 2010). File size: 29743 bytes. 6 3
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 7 Raster vs. Vector Graphics When would you use each? Drawings, Diagrams, Games, etc. Photography, video, etc. 8 4
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 9 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? 10 5
Fewer Colors: GIF Images Graphics Interchange Format (GIF) Each image is made up of any 256 (or 16) RGB colors, but only those colors. How does this affect quantization? 256 colors: 8 bits per pixel 16 colors: 4 bits per pixel 300 * 400 pixels 16 Colors 120,000 bytes 11 How About Fewer Colors? 16 Color GIF 120,000 bytes 256 Color GIF 200,000 bytes Original BMP 360,000 bytes 12 6
Data Compression (saving space) Data compression Reduction in the amount of space needed to store a piece of data. Data compression techniques can be: lossless, which means the data can be retrieved without any loss of the original information lossy, which means some information may be lost in the process of compaction 13 Example: Text Compression Problem: Unicode assigns 16 bits to each character in a document; uses a heck of a lot of space. We need ways to store and transmit text efficiently. Why? Common lossless compression techniques: keyword encoding run-length encoding Huffman encoding 14 7
Keyword Encoding Replace frequently used words with a single character 15 Keyword Encoding Example Given the following paragraph, We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. 16 8
Keyword Encoding Example The encoded paragraph is We hold # truths to be self-evident, $ all men are created equal, $ ~y are endowed by ~ir Creator with certain unalienable Rights, $ among # are Life, Liberty + ~ pursuit of Happiness. $ to secure # rights, Governments are instituted among Men, deriving ~ir just powers from ~ consent of ~ governed, $ whenever any Form of Government becomes destructive of # ends, it is ~ Right of ~ People to alter or to abolish it, + to institute new Government, laying its foundation on such principles + organizing its powers in such form, ^ to ~m shall seem most likely to effect ~ir Safety + Happiness. 17 Keyword Encoding Compression ratio The size of the compressed data divided by the size of the original data (0 < c.r. <= 1) What did we save? Original paragraph: 656 characters Encoded paragraph: 596 characters Characters saved: 60 characters Compression ratio: 596/656 = 0.9085 Could we use this substitution chart for all text? 18 9
Run-Length Encoding Consider a single character which is repeated over and over again in a long sequence. Replace a repeated sequence with a flag character repeated character number of repetitions Example: *n8 * is the flag character n is the repeated character 8 is the number of times n is repeated 19 Run-Length Encoding Example Original text bbbbbbbbjjjkllqqqqqq+++++ Encoded text *b8jjjkll*q6*+5 (Why isn't l encoded? J?) The compression ratio is 15/25 or.6 Encoded text *x4*p4l*k7 Original text xxxxpppplkkkkkkk This type of repetition isn t very helpful for English text; can you think of a situation where it might be helpful? 20 10
Huffman Encoding Why should the character X" and "z" take up the same number of bits as "e" or " "? Huffman codes use variable-length bit strings to represent each character. More frequently used letters have shorter strings to represent them. 21 Huffman Encoding Example ballboard would be 1010001001001010110001111011 Encoded is 28 bits vs 144 bits with Unicode; The compression ratio is 28/144 or 0.39 Try to encode roadbed 22 11
Huffman Encoding Prefix Property No character's bit string is the prefix of any other character's bit string. To decode look for match left to right, bit by bit record letter when a match is found begin next character where you left off 23 Huffman Encoding Example Try it! Decode 1011111001010 24 12
Huffman Encoding The technique for creating codes guarantees the prefix property of the codes. There is no single Huffman code -- each depends on the application. Two types of Huffman codes: general, based on use of letters in English, Spanish,. specialized, based on text itself or specific types of text 25 Lossless Compression Strategies Recall: Keyword encoding Run-length encoding Huffman encoding How can we apply these to images? 26 13
PNG Image Format Portable Network Graphics (PNG) 24-bit bitmapped color. Uses lossless compression. 2-stage compression process: 1. Filter image by adjacent pixels, record the differences 2. Use the DEFLATE algorithm (Huffman encoding scheme) 27 JPEG Images The Joint Photographic Experts Group created 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 28 14
Recall: The RGB Colorspace = RGB has a lot of redundant information. JPEG Uses the YCbCr Colorspace = Y is the luminance component Cb and Cr are the chroma components (blue, red) 15
JPEG and the YCbCr Colorspace JPEG separates luma (brightness) from chroma (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. 31 JPEG Color Smoothing This image is progressively more smoothed from left to right (highest to lowest quality). 32 16
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? 33 Same Picture, Many Formats Original image was 2048 * 1536 pixels All others are 300 * 400 pixels 34 17
Image Manipulation Software There are many different image manipulation software packages, e.g.: Paint Built in to windows Photoshop Commercial software Irfanview Free software Paintshop Pro Shareware/Commercial GIMP Free software 35 36 18
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 37 Student To Dos HW07 due WED 10/27 Readings: Wong ch 3, pp 66-86 (today) Wong ch 4, pp 102-117 (next week) 38 19