Digital Color 24-bit Color Indexed Color Image file compression Sharpening filters

24-bit Pixels 24-bit color uses one byte (8 bits) for each component of an RGB pixel (8 bits for red, 8 bits for green, 8 bits for blue) The brightness for each color ranges from 00000000=0 (darkest) 00000001=1 00000010=2 …. 11111110=254 11111111=255 (brightest)

24-bit Pixels Thus each of the three colors can take on any of 256 different brightness levels The total number of colors is 256x256x256 = approx 16.8 million colors pink pixel yellow pixel

Concept Question What color is a pixel with values: Red: 0 Green: 255 Blue: 255 Blue Purple Green Cyan Yellow 255 255

The Color Cube The color cube is a way of visualizing the three-dimensional digital color space http://www.danshort.com/colorcube/

Image Files: Size and Resolution There are several different numbers to consider when describing image size and resolution Pixel dimension: the number of pixels in the image file itself, e.g. 1024x768 pixels The physical size of an image, either on a screen or printed, depends on the resolution of the image, the screen, and the printer Resolution is typically given in pixels per inch

Display Resolution Computer and television displays have something called display resolution Display resolution depends on the physical size of the display and the pixel dimensions of the display You may see HDTVs quoted as having “1920x1080 resolution”, but this is a pixel dimension, not a resolution.

Screen Example Comparison 1920 pixels, 44” 1280 pixels, 11” 13” 50” 1920 pixels / 44 inches = approx. 44 pixels per inch 1280 pixels / 11 inches = approx. 112 pixels per inch

Print Resolution Print resolution, usually given in “dots per inch” (dpi), is the number of individual colored dots per inch that the printer produces on the paper In general, you need at least 100 dpi, and preferably 300 dpi or more for an image to look good when printed Combining the pixel dimension of the image and the printing resolution gives the final physical size of the image: e.g. a 1000x1000 pixel image printed at 250 dpi would be 4”x4”

Image and Print Resolution Pixels per inch of the image Dots per inch of a printed copy of the image

Print Resolution

Concept Question An image has the pixel dimension 1500x1500 pixels. It is printed at 300dpi. What is the physical size of the printed image? 3”x3” 3.5”x3.5” 4”x4” 4.5”x4.5” 5”x5”

Indexed Color A full 24-bit RGB color image would require 3 bytes of storage for each pixel in the image, e.g. a 10 megapixel digital photograph would require 30 MB of storage space This is, in general, not necessary. Most images do not contain 16.8 million different colors, so the file size can be reduced by reducing the pixel depth For example, 8-bit color can only show 256 colors, but takes only 1/3 the space of a 24-bit color image

Indexed Color While all 8-bit color images contain a maximum of 256 different colors, the colors themselves are not always the same. When a 24-bit color image is converted to 8-bit color, a color coding table is generated to include 256 colors out of the 16.8 million available to best preserve the color information in the image

Color Table Comparison

Indexed Color The color cube, containing all 16.8 million RGB colors, is divided into 256 pieces to construct the color table for one particular image Consider the color cube as a cube of cake containing an evenly spaced array of 16.8 million poppyseeds, each representing one color The colors that are actually present in the image are represented by glowing poppyseeds

Indexed Color The object is to cut the cake into 256 pieces so that there are the same number of glowing poppyseeds in each piece Each piece will contain many glowing poppyseeds, but they will be very close in color, so we can replace all those different colors with just one color for each cake piece The cake cutting will be different for every digital image

Indexed Color: Color Tables

Concept Question A palette used for a computer image in an 8-bit color scheme Contains 8 different colors, each chosen out of a possible 8 colors. Contains 8 different colors, each chosen out of a possible 256 colors. Contains 256 different colors, each chosen out of a possible 256 colors. Contains 256 different colors, each chosen out of a possible 16.8 million colors. Contains 16.8 million colors.

Storing Image Files The most naïve way to store an image is as a giant list of each pixel value in the image This is very inefficient and results in very large image files Image files can be made smaller by compression tricks. There are two kinds of compression: Lossless compression: all information is preserved, but compression is modest Lossy compression: compression can be more extreme, but some information is throw away

Lossless Compression Lossless compression preserves all the information in an image file, but stores it in a more efficient way. Different methods of lossless compression are designed to efficiently compress different kinds of data The simplest lossless image compression method is called “run-length encoding”

Run-Length Encoding (RLE) RLE exploits the fact that there are sections of repeated pixels in most images. Consider the following sequence of pixels: This might represent the following colored pixels: This can be expressed in fewer bits by replacing long runs of the same color with two bytes, one indicating the color, and the other indicating the number of repeats 32 84 128 96 74 56

Run-Length Encoding Here we have coded this in the following way: 32 84 128 96 74 56 Here we have coded this in the following way: A red number indicates that the following byte is to be read as a color, and repeated that number of times A yellow number indicates the number of bytes following which are nonrepeating. This (shorter) sequence of bytes is re-expanded by the graphics software into the original sequence of bytes 5 2 32 84 4 128 3 96 74 56

Concept Question For which image would RLE produce a smaller file (better compression) A B Original image Indexed Color: 16 colors

Lossy Compression Lossy compression makes image files smaller by both storing information more efficiently, and throwing away information. The most commonly used lossy compression method is JPEG (Joint Photographic Experts Group) The JPEG method uses two main compression steps: It merges similar colors into the same color It removes small detail information from the image

JPEG Compression: Color http://clarebayley.com/2010/03/the-jpeg-compression-algorithm/

JPEG Compression: Detail The algorithm replaces blocks of small details with the block from a library of possible blocks that best matches the original image There are more details about how this works in the online notes

JPEG Compression: Results

JPEG Compression

Image Filters: Sharpening Sharpening filters in Photoshop work just like lateral inhibition works in your retina. Edges between dark and light areas are enhanced by making the light areas lighter and the dark areas darker http://micro.magnet.fsu.edu/primer/java/digitalimaging/processing/unsharpmask/

Sharpen Filter Image files are basically arrays (matrices) of numbers, so image processing is just number processing Let’s consider the following mathematical “filter”: -1 2 -1

Sharpening: Original 2 4 6

Sharpening: Results 2 4 8 6