Raster Graphics

Raster GraphicsAn image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each pixel.

Used for photo-realistic images and complex drawings.

Raster Image CaptureA raster image can be captured in a number of ways:

• Digital Camera• Scanner • Drawing Software

An image ends up being described in an image file as a series of pixels.Common file types are JPEG, GIF, TIFF, PNG.

Raster Image CaptureDigital Camera Example

Raster Image CaptureDigital Camera Example

Raster Image Capture

Camera SensorWidth

Sensor Height Pixels Megapixels

Canon A75 2048 1536 3,145,728 3

Canon 40D 3888 2592 10,077,696 10.1

Canon 5D 4368 2912 12,719,616 12.7

Raster GraphicsThe pixels can be described at varying bit depth resulting in different numbers of

colors:

Bit depth Binary combinations Colours

1-bit 0 1 2

2-bit

4-bit 0000 0001 0010 00110100 0101 0110 01111000 1001 1010 10111100 1101 1110 1111

8-bit 256

RGB color: 24 bits … 8 bit R, 8 bit G, 8 bit B = 256 *256*256 = 16,722,216 colors

Raster Image Files

1 2 3 4

1 122R, 13G, 104B 122R, 18 G, 104B 122R, 23G, 104B ………………..

2 132R, 13G, 104B 132R, 18G, 104B 132R, 23G, 104B ………………..

3 ……………….. ……………….. ……………….. ………………..

The contents of a raster image file can be conceptualised as per the table below:

Raster Graphics ImagesHow clear an image appears when it is viewed on a screen or printed depends on size

and resolution.

Image size is the number of pixels in a row times the number of rows. For example, 800 x 600 or 1280 x 1024.

Image size can also be measured in pixels. An 800 x 600 image contains 480000 pixels. One million pixels = 1 Megpixel.

Image size remains constant unless changed in a software package.

Raster Graphics Images

Image resolution depends on the number of pixels printed or displayed per inch (ppi). It has nothing to do with the original image size.

Device Typical Resolution

Inkjet printer 300dpi

Laser printer 600dpi

Monitor 72ppi

Raster Graphics ImagesThe physical size of an image depends on the image size and the resolution of the printer.

For example:

How large will a 1200* 900 image be when printed on a 300dpi printer?

1200/300 = 4 inches high900/300 = 3 inches wide

Raster Graphics ImagesThe same 1200 x 900 image displayed on a monitor (72ppi) will be 16.67 x 12.5 inches.

Q. What happens if we stretch an image on the screen beyond its displayed size?A. It gets pixellated

Raster Graphics ImagesQ. What happens if we shrink an image on the screen from its displayed size?A. ?

Image DitheringMost image manipulation software provides a palette of Web Safe Colors. There are

normally 256 colors.

How is an image with a 16 million color palette converted to a 256 color palette?

Dithering

Image File FormatsWhat are they and how do you choose?

There are many file types to cope with the problem of raster image files being very large.

An 800 x 600 image will contain 480,000 pixels.

Each pixel requires 24 bits (3 bytes) to describe the levels of RGB.

File size = 1,440,000 bytes = 1.4Mbytes (approx)

Image File Formats

2 ways to reduce image file size:

1. Reduce number of colors (dither or choose nearest color)2. Compress pixel data

2 types of compression:

Loseless – look for more efficient ways of storing pixel dataLossy – accept some quality loss in image in order to decrease file size

Image File Formats

Loseless Compression

Look for a recurring pattern in an image file and use a shortcut.

Eg.

WWWBlBlBlBlBlWWW

could become

3W5Bl3W

Image File Formats

JPEG

• Joint Photographic Experts Group• Best for photographs that contain many colors• Large compression retaining quality• Lossy compression – discards pixel data the eye is least likely to notice• Amount of compression adjustable

Image File Formats

GIF

• Graphics Interchange Format• Creates a table of 256 colors• Analyses image to choose best 256 colors• Replaces commonly occurring patterns with abbreviations• Loseless for images with less than 256 colors otherwise lossy.

Image File Formats

TIFF

• Tagged Image File Format• Loseless• Large files• Works on both Mac and PC• Supports any color depth• Not recognised by many browsers

Image File Formats

PNG

• Portable Network Graphics• High compression rate• Loseless

Raster Images

Is it possible for a 3MP camera to produce a 10 inch x 8 inch print at 300dpi with high quality?

Color SchemesWhen choosing colors for a web site and images to go on a web site the color scheme chosen for

the site is important. Colors should be chosen using a color wheel.

Complimentary colors sit on opposite sides of the color wheel. For example – http://www.naturestable.com/

Analogous colors sit on opposite sides of the color wheel. For example - http://www.gorillaglue.com/

Raster vs Vector Images

List 4 key differences between Raster and Vector images