Graphics CS 121 Concepts of Computing II. What is a graphic? n A rectangular image. n Stored in a file of its own, or … … embedded in another data file.

Graphics

CS 121

Concepts of Computing II

What is a graphic?

A rectangular image.

Stored in a file of its own, or …

… embedded in another data file.

Displayed on a monitor screen, or …

… printed on paper by programs.

Manipulated by graphics programs, or …

… graphics tools built into other programs.

Graphics Characteristics

Three properties of a graphic...– Resolution

• how many pixels/dots per inch

– Color Depth or Bit Depth• how many colors

– Size• width and height

Resolution

Number of dots per inch (dpi) used to display or print the image (aka: ppi = pixels per inch).

Monitors: 72± dpi.

Display Resolutions

Monitor Size W by H dpi15” 640 X 480 5515” 800 X 600 7017” 800 x 600 6017” 1024 X 768 8019” 800 X 600 5219” 1024 X 768 7019” 1152 X 864 80

Resolution

Printers: 600 - 2400 dpi (±). Effect:

– Higher resolution = more memory. Question…

– How will the image be used?

Number of dots per inch (dpi) used to display or print the image (aka: ppi = pixels per inch).

Monitors: 72± dpi.

Color Depth or Bit Depth

Number of bits of memory used to store each pixel (dot). Bits Colors

1 22 44 168 25616 32,768

24/32 16,777,216 Effect:– More colors = more memory.

#colors = 2#bits

Overhead … color table.

NOTE: Color may mean “shades of gray.”

Size

Sometimes confused with resolution. Given as an pair of numbers…

– width X height Measured in…

– inches– centimeters– pixels (dots)– picas (1/6”)– points (1/72”)

Compression

Why?– Save memory!

Two methods …– lossless = no loss of data– lossy = discards “unnecessary” or “redundant”

data

Representations of Graphics

Raster (aka: Bit-Mapped)– Each pixel (dot) is represented by a series of bits

(specifies its color) Vector (aka: Object-Oriented)

– Image is composed of discrete objects (lines, ellipses, rectangles, curves, polygons, text, …) represented by mathematical formulas.

Which requires more memory?– Depends on the complexity of the image.

Characteristics ofRaster Graphics Application

– Photo-realistic images Editing Tools

– Paint programs Editing Operations

– Manipulate pixels or groups of pixels. Resizing (primary disadvantage)

– Larger = grainy– Smaller = loss of detail

aka: Bit-Mapped Graphics

Characteristics ofVector Graphics Application

– Diagrams, Logos, and Clipart Editing Tools

– Draw programs Editing Operations

– Manipulate objects Resizing

– Larger or Smaller: No loss of quality.

aka: Object-Oriented Graphics

Output of Graphics

Raster devices…– dot matrix printers– ink jet printers– laser printers– monitors

Vector devices…– plotters

Consequence…– Some translation must occur at the time of output.

Graphic File Formats

TIFF - Tagged Image File Format– most widely supported raster (bit-mapped) format– any resolution– any bit depth (color or gray-scale)– any size– filename extension: .tif

1 of 9

Graphic File Formats

EPS - Encapsulated PostScript– most widely supported vector (object oriented)

format– for printers only!– can contain a bit-mapped image preview for

display purposes– advantage: scaleable– filename extension: .eps

2 of 9

Graphic File Formats

JPEG - Joint Photographic Experts Group– raster (bit-map)– primary applications:

• photographs• web pages (one of three formats supported)

– lossy compression (variable)– two forms:

• 256 gray-scale• 16.7 million colors

– filename extension: .jpg

3 of 9

Graphic File Formats

GIF - Graphics Interchange Format– raster (bit-map)– primary applications:

• diagrams and clipart• web pages (one of three formats supported)

– lossless compression– maximum of 256 colors or grays– special features…

• interlacing• transparent color• animated

– filename extension: .gif

4 of 9

Graphic File Formats

PNG - Portable Network Graphics– raster (bit-map) GIF look-a-like (royalty free)– primary applications:

• photographs, diagrams, and clipart

• web pages (one of three formats supported)

– lossless compression– three forms…

• gray-scale, 16.7 million colors, 256 colors

– special features…• dual direction interlacing, variable transparency

– filename extension: .png

5 of 9

Graphic File Formats

BMP - Bit-mapped Graphic– standard raster (bit-map) format for Windows– 16.7 million colors– filename extension: .bmp

6 of 9

Graphic File Formats

WMF - Windows Meta File– standard vector format for Windows– can contain a bitmap image– filename extension: .wmf

7 of 9

Graphic File Formats

PICT - Picture– standard graphic format for Macintosh– raster (bit-map) or vector (object-oriented)– 16.7 million colors or 256 grays– filename extension: .pct or .pict

8 of 9

Graphic File Formats

Others……….– One web site lists over 100 formats!

• http://www.wotsit.org/cgi-bin/search.cgi?graphics

– Most are proprietary. Which format do you use?

– Depends on the application.

9 of 9

Sources of Graphics

Image Processing Programs– paint for raster (bit-map)– draw for vector (object-oriented)

Scanner Clip-art and Photo Libraries (CD’s) Digital Camera Video Capture Internet (?)

Warning: Graphics

ARECopyrighted!