Image File Formats A Review of Common Image

Image File Formats A Review of Common Image Storage Formats Travis Roe Topics of Computer Science

Objectives Image File Formats Compression Lossless Lossy Comparisons Applications Resources/References Questions

Image File Formats Uncompressed Compressed - Lossless BMP (generally, although not always) PPM (text, sometimes) GIF PNG Compressed - Lossy JPEG

Compression Lossless (xkcd 331) Lossy

Compression Lossless Reconstruct images with the same bit patterns as before Often compress artificial images, or images with sharp lines very well. Useful for storing images with sections of continuous color (or lack of color – transparency)

Compression Lossless - GIF and PNG comparison GIF PNG 1 -8 bit color depth Up to 8 -bit color pallete Single color transparency Multiple-images per file Patented 1 -48 bit color depth (16 bit grayscale) Up to 8 -bit color pallete Full alpha channel (256 levels of transparency) Single-image (MNG handles multiple) Free! (was designed partially to replace GIF)

Compression Lossless – A Terror to Compression Every single color possible in 24 bit color. http: //www. libpng. org/pub/png/img_png/16 million. png How do we handle that!? Huffman encoding cries! GIFs do not have enough color depth to represent them (they weren't designed for it, anyway) PNGs handle this: Uncompressed 48 MB Compressed (w/o Filters) 36 MB Filters 113 KB (PNG book explained it could be even smaller!)

Compression Lossless – PNG Uses filters (a different filter can be used for each line) to simplify compression None (bytes are unchanged) Subtract (the difference of one pixel to the one before it) Up (the difference of one pixel to the one above it) Average (the difference between one pixel and the ones to the left and above it) Paeth (based on Paeth predictor) (adapted from Roelofs, Table 9 -1, p 148)

Compression Lossy Sacrifices perfect storage for lower file sizes, yet still acceptable images. Good for photographs Not designed for sharp edges and text. Not designed as an intermediate format for post-processing

Compression Lossy – Maluse When you repeatedly save-and-load-and-saveand-load a lossy-ly compressed image, more of the image's data disappears.

Compression Lossy - Maluse - Original

Compression Lossy - Maluse - JPEG save 1 (10%)

Compression Lossy - Maluse - JPEG save 10 (10%)

Compression Lossy - Maluse – Differences between 1 and 10

Compression Lossy - Maluse - Differences 1 -10 exaggerated

Compression Lossy – Maluse 2 As stated earlier, another thing that lossy image file formats are not designed for is text and sharp lines.

Compression Lossy – Maluse 2 (examples) Compression artifacts can do great damage to text, especially at higher compression levels (lower quality images) (example is at 40% compression)

Comparisons Real-World Examples Comic Book with Text Dog 2 “Drawings”

Comparisons Comic Book with Text Original file (PNG): 21. 2 k. B JPEG @ 25% (approx same size, quality still acceptably good) GIF (4 bit) 13. 7 k. B PNG (my version, 4 bit): 12. 5 k. B

Comparisons Dog (512 x 768) JPEG (10%): 134 k. B PNG (24 bit): 659 k. B PNG (8 bit pallete): 188 k. B

Comparisons Dog (JPEG vs Palleted PNG) JPEG : 134 k. B PNG: 188 k. B

Comparisons Drawing 1 PNG: 159 k. B JPEG (5%)103 k. B (there were noticable compression artifacts when zoomed to 300%) PNG (pallete, dithered): 106 k. B

Comparisons Drawing 1 (24 bit PNG vs 8 -bit PNG 24 bit PNG 8 -bit PNG (pallete)

Comparisons Drawing 2 PNG: 33. 8 k. B JPEG (10%): 36. 5 k. B JPEG (5%): 51. 7 k. B PNG (pallete, dithered): 24. 2 k. B (no noticable difference between 24 bit PNG and 8 -bit palleted one)

Applications So what does this have to do with CS? Many programs use images. Finding out the most appropriate format for the job and then using it can save space. That is especially useful when programs are restricted in space (like a cell phone or a game that's near the edge of the CD/DVD limit) Web developers want to keep their bandwidth to a minimum. Reducing the amount of space needed to store the same image helps.

Resources/References Resources Used Image Editing Software Corel Paint Shop Pro Photo XI (version 11. 20) The GIMP 2. 4. 1 (Windows Version) Picasa 2 (primarily for browsing) Camera Used Canon Digital Rebel (EOS 300 D)

Resources/References 16 million. jpg http: //www. libpng. org/pub/png/img_png/16 mil lion. png Roelofs, Greg. PNG: The Definitive Guide. O'Reilly & Associates. 1999. (also available online at: http: //www. oreilly. com/catalog/pngdefg/ ) Wolfgang, Ray. “JPEG Tutorial”. Perdue University. http: //cobweb. ecn. purdue. edu/~ace/jpegtut 1. html XKCD episode 331: http: //xkcd. com/331/

Questions 1)When saving an image like a photograph, what's the most appropriate kind of file format to use? 2)If an image has a range of transparency, what file format should be used to render it?