COMP 15.3. Bitmapped and Vector Graphics

Pages 116-123

Using Qwizdom

What will you learn today?

Identify characteristics of bitmap and vector graphics

Compare bitmap and Vector graphics Understand key terms such as image and screen

resolution, colour depth, compression techniques Calculate simple file sizes for bitmap images Understand what is meant by a drawing list

What is a digital image?

Real world colour picture is converted to numeric computer data consisting of rows and columns of millions of colour samples measured from the original picture.

Examples: scanning, digital camera, or computer

generated

Graphic Types

There are two different types of graphics: Bitmap graphics

Vector Graphics

Bitmapped graphics

Image divided into a grid of picture elements. This is the smallest addressable area or smallest

block of colour in an image called …………

The bitmapped file contains the bitmapped representation of the image.The binary code for each pixel is stored in memory and then displayed on the screen

pixel

Definition!!!

Image divided into a grid of picture elements. This is the smallest addressable area or smallest

block of colour in an image called …………

The bitmapped file contains the bitmapped representation of the image.The binary code for each pixel is stored in memory and then displayed on the screen

What is meant by screen resolution?

Screen resolution is expressed in :

A. Total No of pixels on the screen

B. Pixels per Inch

C. Dots per Inch

D. (No of pixels in a row) by (No of pixels in a column)

18 ppi

36 ppi

72 ppi

Image resolution

Is expressed in pixels/dots per Inch So how can the quality of a scanned image

be improved? Increase the DPI

So a small image size containing a large number of pixels should produce the sharpest image

Effect on an image with afixed number of pixels of reducing the display’s resolution

Color Depth

Number of colors each pixel can be. 1 bit black or white 8 bit 256 colors 16 bit 65,536 colors 24 bit 16.7 million colors 32 bit Millions plus extra information The more colors per pixel, the larger the file

size

How are colours coded?

RGB colour – Red, Green and Blue are encoded separately

How is ‘white’ encoded using RGB?A. All three colour values are set to ‘0’

B. All three colour values are set to ‘1’

C. It is calculated differently by each computer

Graphical Display MethodsBit-mapped Graphics: 1 Bit/pixel Monochrome

Use of on/off information on a map One bit in memory needed to represent each pixel

00110100

Pixel(smallest picture

element of a display)

D to A convertor1 Pixel fully on

Raster ScanVideo RAM

Graphical Display Methods 8 Bits/pixel Colour screen

Each pixel corresponds with one byte in memory How many colours can be coded for each pixel?

0011010000110100

0011010000110100

0011010000110100

0011010000110100

0 0 0 1 1 0 0 0D to A

convertor

Raster Scan

VRAM

12 bit colour – sometimes used for devices with limited colour display such as mobile phones

4 bits for each of the R, G and B components How many different colours can be

represented this way?

True colour Mimics many colours found in the real world. It approaches the number of colours the human eye

can distinguish for most photographic images 24 bit true colour – 8 bits for Red, 8 bits for Blue

and 8 bits for Green The number of colours that can be represented in

24 bits are: 256 * 256 * 256 = 16,777,216 bits 32 bit colour – is true colour with an extra 8 bits

that is ignored or represents an alpha channel, which is a way of providing partial transparency.

How many colours are possible using 1 byte per pixel?

A. 255

B. 2

C. 256

D. 8

How many colours are possible using 2 bytes per pixel?

A. 65,536

B. 1024

C. 65,535

D. 16

Suppose a bitmapped image, size 8 pixels x 8 pixels, uses 8 bits to encode the colour of each pixel. How many bytes are required to store the image’s bitmap?

Enter the number of bytes required to store the image.

If we use a higher resolution for the image (say from 8x8 to 16x16), keeping it’s dimensions the same, what will happen with the file size?

The number of pixels will increase by a factor of four, so the memory requirement must increase from 64 bytes to 256 bytes.

A graphic with 600 X 300 px using 1 byte for each pixel.How big is file size in bytes?

A. 18 000 bytes

B. 180 000 bytes

C. 180 Kb

D. 9000 bytes

For the same graphic size (600 X 300) 16 bits are used for each pixel.How large is files size now?

A. (300 x 600 x 2 ) / 10= 36 000 Kb

B. (300 x 600 x 2)/ 1000= 360 Kb

C. (300 x 600) / 1000= 180 Kb

D. (300 x 600 x 2) / 1024 = 352 Kb

For the same graphic dimension (600 X 300),

the size in pixels are doubled to 1200 x 600 in each dimension by how much will the number of pixels increase?

A. The number of pixels will increase from 360,000 to 720,000 and file size from 352 Kb to 704 Kb

B. The number of pixels will increase from 360,000 to 1,440,000 and file size from 352 Kb to 1408 Kb

Vector Graphics Images are represented as mathematical

formulae that define shapes in the image such as lines, polygons and text

Based upon a system of start and end point coordinates

A line is drawn directly on the screen by the electron beam

Vector (line) is refreshed at a fast rate or the line would disappear

Images are represented as mathematical formulae that define shapes in the image such as lines, polygons and text

Based upon a system of start and end point coordinates

A line is drawn directly on the screen by the electron beam

Vector (line) is refreshed at a fast rate or the line would disappear

Definition!!!

Vector Graphics The graphic is created by specifying the

properties of every object:

Properties or attributes are position, size, direction, line thickness, font-size etc

Vector Graphics

Drawing list: For each graphic a list of all drawing commands

that recreate the objects in a vector graphic

E.g. line(20,10,180,20,red,4) Find out the kind of properties that can be stored

for a rectangle?

Bitmap and Vector Graphics

Compression of Bitmap graphic files

To squeeze data into a smaller number of bytes.

Run-length encoding – without loss of image quality (Lossless compression) Some images have long runs of same colour,

memory cells are compared For example:

If on a row of pixels there is a line of thirty red pixels, -> store the colour value for `red' once, and store that it's repeated thirty times.

File formats: GIF and PNG

Lossy Compression

Lossy compression – discards information which is not considered important Background scenery saved with reduced

resolution. The image differs from original image Compare JPG and Tiff

Image saved as JPEG at 10% quality (90% compression, 1.5kB filesize).

Image saved as JPEG at 90% quality (10% compression, 15kB filesize).

Compression of graphic filesTo squeeze data into a smaller number of

bytes.

Exercise in Pairs Compare Vector and Bitmap graphics

Where are vector graphics used in industry, and where are bitmap graphics used?

Compare typical file sizes between bitmap and vector – why are there differences?

Scalability/resizing? Give 3 file types and 3 software applications for

each graphic type.

Time: 10 minutes

Compare Bitmap and Vector Graphics

BitmapAdvantages Very detailed, photographic

images Multiple tools/filters can be used Used for scanning and digital

photographs Can be compressed Widely supported file typesDisadvantages Large file size When scaled – pixels enlarge and

pixels become visible = pixilationFile types: .GIF, .PNG, .JPG Software applications: Paint.net,

Photoshop

VectorAdvantages Can resize graphic without distortion -

geometric Are defined by relative positions of

objects in a 2-D or 3-D coordinate system

Is easier to render an object Requires fewer bytes and loads faster Each object is editable separately Almost all specialist graphics systems

use vector graphics. E.g. CAD, animation software

Used for logos, diagramsDisadvantages Less detailed image content Software specific – needs exporting for

use outsideFile types: .FLA, .SWF, .CDRSoftware applications: Corel Draw,

CAD, Flash

What have you learned this lesson?

What is meant by image resolution

A. The size of the file

B. The size of the image

C. The number of pixels wide by the number of pixels high

D. Pixels per inch

What is meant by image resolution

Why are vector graphics typically smaller in file size?A. The dimensions are usually smaller

B. They usually contain less detail

C. They store mathematical information on the objects, dimensions etc only, not the ‘white space’

D. They number of colours available is limited

Which file format will typically be of a larger size?

A. BMP

B. CDR

C. FLA

D. SWF

Identify a vector graphic file type from the list below

A. GIF

B. JPEG

C. BMP

D. DOC

E. SWF

The sharpness of an image depends on

A. The number of pixels

B. The size of the pixels – the smaller the better

C. The size of the pixels – the larger the better

D. The File size

What is meant by colour depth?

A. The number of bits used to represent the colour of a single pixel

B. The resolution of the image, the more pixels, the better colour depth

C. The quality of the VDU screen output

Homework for next lesson

In AQA Computing Book

pages 116 – 123 – Questions 1 to 14