Graphics & Graphic Formats

Learning Objectives

• How black & white images are represented on computers
• What resolution is, how resolution affects picture quality, and what normal resolutions are in computer graphics.
• How grayscale graphics differ from black and white images
• How any color of visible light can be represented as a combination of red, green, and blue
• How the combination of colors provided 8 colors for graphics on early computers
• How varying the intensity of the RGB colors can provide more than 8 colors
• How the combination of colors is represented in the RGB color scheme, with three bytes per pixel
• How the size of graphics is affected in the RGB scheme, compared to black & white and grayscale
• How dithering can be used to represent colors
• How the indexed color scheme represents pictures with a pallette of colors and dithering
• How the size of graphics is affected in the indexed color scheme, compared to black & white, grayscale, and RGB images.
• Why we don't see very many grayscale images on the web.
• How the RGB and indexed color schemes are implemented in GIF and JPEG graphics file formats.

Black & White Graphics

Binary Numbers

• Computers represent everything as strings of 1s and 0s
• These are called "bits"
• A group of 8 bits is called a "byte"
• You can represent any number from 0 to 255 with one byte using binary arithmetic
• Graphics involve turning pictures into bits

Turning Black & White Pictures into Graphics

• Grid placed over graphic defines pixels (short for "picture elements")
• Each square is assigned a 1 or zero depending on whether it is black or white
• B&W graphics use one bit per pixel (black or white)

Resolution

• The number of divisions in the grid determines the resolution
• The greater the resolution, the better the graphic looks, up to a point
• The greater the resolution the bigger the graphics file.  The size increase is the square of the resolution increase.
• Low resolution graphics represent geometric shapes (like lines) poorly.  They create "jaggies."
• Resolution is normally expressed in pixels per inch (ppi) somtimes referred to as dots per inch (dpi).
• The resolution of a regular computer monitor is 72 ppi.
• Most scanners routinely scan at 300 ppi.
• Very high resolution graphics are done at 1200 ppi.

Grayscale Images

• Pictures of any resolution look better if each pixel shows a shade of gray rather than just black or white
• With black and white (left picture) each pixel must be "turned" black or white, depending on which color it's closer to.  This makes the picture look grainy and unrealistic.
• With grayscale (right picture) each pixel is any of 256 levels of gray (actually, whiteness).  The result looks much better, and more fuzzy than grainy.
• Grayscale graphics use 8 bits (1 byte) per pixel to represent 256 shades of black-gray-white.
• This is 8 times as much data as a black and white pictue of the same resolution.

Color Graphics Schemes

Any color of visible light can be represented as some combination of red green and blue. The various combinations make up the primary and secondary colors.

Color	Combo	Example
Red	all red, no green or blue
Green	all green, no red or blue
Blue	all blue, no red or green
Cyan	green + blue, no red
Magenta	red + blue, no green
Yellow	red + green, no blue
White	red + blue + green
Black	no red, no blue, no green

This 8 color scheme used to be all you got with "color graphics" on a computer!

To get more than 8 colors, you can vary the intensity of the colors
 

Combo	Example
full red + ½ blue + ¼ green
¼ red + ¼ blue + ½ green
¾ red + ¾ blue + ½ green

Representing RGB on the computer

• Allow 256 levels of each color. Recall that grayscale images use 256 levels of lightness. The same principle applies, but to specific colors.
• Use group of 3 bytes to represent each pixel:

• Pro: It can represent 256 x 256 x 256 = 16,777,216 different colors.
• Pro: Computer monitors use electrons projected thru RGB masks, so the graphics use the same color model as the monitors.
• Con: Makes for big files. For a 100 pixels by 100 pixels graphic:

Format	Size in bytes
Black & White	1000
Grayscale	8000
RGB color	24000

 

Uses the visual phenomenon in which two small dots of color placed close together blur into one color.

You can use a combination of these dots to "fake" different colors. This process is called dithering.

Here is an example of a dithered solid color.  The graphic is made up of a grid of red and green dots.

Complex dithering algorithms take an RGB image and a palette of colors, and construct a new image made up of adjacent dots that "fake" the colors of the original. As you can see from these photos, the process works very well.

 

RGB Color	Indexed Color

Palettes

• Dithering algorithms require a palette
• It's common to use a 256 color palette. That size palette means you only need 1 byte per pixel to show the color, 1/3 the size of a comparable RGB image. That's the same size as a grayscale image, which explains why you don't see very many grayscale images on the web.
• The following palette was used for the indexed color picture from above



• Size of the palette determines the quality of the dithering. You can use smaller palettes, which give smaller files but less accurate color reproduction.

GIF - "Graphics Image Format" a.k.a. Compuserve GIF

• It's an indexed color inage format
• All graphic web browsers display it
• It allows "progressive" loading where the graphic sort of fades-in
• It allows you to define a "transparent" color
• It allows multiple image files, which some browsers can display as an animation

• It can display RGB images
• It uses compression, so jpg files are often smaller than GIF files
• In the past, many web browsers couldn't display it, but this is becoming less of an issue as people use newer browsers
• There are now "progressive jpeg" files