2. Computer Graphics Lesson 2 July 12, 2005

3. Image Formats What are some formats you are familiar with? There are 4 basic image format types: Uncompressed “Lossy” Compression Palletized Images Vector Images

4. Uncompressed Images An image is considered to be uncompressed if each pixel is stored individually with its full color value. The Bitmap (BMP) file format is a good example of an uncompressed file format. BMP files may still be compressed using “lossless” compression algorithms such as ZIP.

5. Uncompressed Images Each Pixel is stored using 3 numbers representing the individual color channels. R = 243 G = 198 B = 114 R = 239 G = 190 B = 106 R = 243 G = 199 B = 115 … R = 245 G = 197 B = 114 R = 245 G = 197 B = 112 R = 241 G = 192 B = 108 … R = 244 G = 195 B = 109 R = 243 G = 190 B = 102 R = 239 G = 184 B = 99 … …………

6. Uncompressed Images Calculating Size: An uncompressed image requires 3 bytes (numbers) per pixel; one for each color channel. So… a 256x256 image would require 256*256*3 = 196608 bytes! OMG! … or 192 kilobytes… meh.

7. Compressed Images The Joint Photographic Experts Group (JPEG) file format utilizes image compression by approximation to reduce file size. As you can see, there is some quality loss although the effect is magnified here. With JPEG CompressionWithout Compression

8. Compressed Images Compressed Images take advantage of visual approximation. Most images do not need to be displayed exactly as they were created. The resulting image need only resemble the original. The compression comes at the expense of some image quality. So, as is often the case in CS we have a memory  quality tradeoff.

9. Color Pallets Another way of making images smaller is by restricting the number of colors that can be displayed in one image. Previously we discussed 1 byte (8bits) per color channel. This is known as 24-bit color or True Color. 2 8 * 2 8 * 2 8 = 16,777,216 colors While this provides good color depth, in many images less than a handful of those colors are actually used.

10. Color Pallets To the right is a 256 color table containing every color used in this Mona Lisa image. Each color is 24 bits, but every pixel contains only 8 bits which index a color in the table.

11. Color Pallets

12. Vector Images In a vector image, the computer stores lines, shapes, and colors instead of pixels. When it is time to show the image a traditional “raster” image is generated for display on a monitor. The most popular file format for vectors is called Scalable Vector Graphics (SVG).

13. Vector Images Vector images look more like drawings, but they have the advantage that that can be rastered at any level of detail, meaning they are infinitely scalable.

14. Image Format Comparison BMPJPEGGIFSVG File SizeLargestVariableSmall Image Quality Perfect at a given resolution. Variable Some color depth loss. Perfect ScalabilityLimited Limited and results in more loss. LimitedPerfect PhotorealismBestVery goodPoorBad