Prepared by : Haval Akrawi (MS.

c) 2016-2017

Graphics and Image Data Representation

Pixel - Is short for Picture Element.

The amount of pixels in an image depends on the resolutions of the
image, the more pixels in an image, the higher the resolution. The less
pixels in an image the lower the resolution.
Pixel intensity means that the intensity of each pixel is variable. In
colour image systems, a colour is typically represented by three or four
component intensities such as red, green, and blue, or cyan, magenta,
yellow, and black.

The image on the right is an original image from the internet with a resolution
size of 1920x1200. The image on the left is a zoomed in version of the original
image on the right. The zoomed in version shows all the various pixels which are
use to make up that part of the image.

1
Prepared by : Haval Akrawi (MS.c) 2016-2017
Vector vs raster

Vector images are images made up of lines described mathematically

Raster images are grids of dots, or pixels, each pixel containing color
information. They are also known as bitmaps

Vector image

This vector image shows a line from x1,y1 to x2,y2

If this image were sent to a pen plotter, the image would translate as instructions
to the plotter to lift the pen off the paper, move to coordinate x1,y1, lower the pen
onto the paper and move to x2,y2, so drawing the line.

In this way, straight lines, arcs and circles can be drawn and the lines are perfect.

2
Prepared by : Haval Akrawi (MS.c) 2016-2017

Raster image

In the raster image below, the area is divided into a number of pixels and the
impression of a line is given by some pixels being black and others white.

Raster image 8*6 pixels

PIXEL = Picture Element

With so few pixels, the

line is much stepped.

Raster image 16*12 pixels

With more pixels, the line

is less jagged, but the file
size is bigger.

File size is proportional to number of pixels

3
Prepared by : Haval Akrawi (MS.c) 2016-2017

As in the example above,

8 * 6 = 48 pixels

16 * 12 = 192 pixels

Or a more realistic sized image ....

640 * 480 = 307,200 pixels

1280 * 960 = 1,228,800 pixels

If you multiply the width and height by 2, the file size increases by a factor of 4.
So, if you scale your image by 50 percent, you are halving the width and
height, but you are reducing the file size by a factor of 4.

File size is approximately equal to number of pixels * bit depth

4
Prepared by : Haval Akrawi (MS.c) 2016-2017

Vector vs. Bitmap based images

VECTOR BASED BITMAP BASED

• Advantages: • Advantages:
→ Based on mathematical → More suitable for photo-
formulae which means they realistic images that require
are easily scalable. complex colour scales.
→ contains only the defining → Each bitmap-based image is
mathematical formulas for mapped into a grid. The size of
each element within the the grid is based on the
image and therefore requires image's resolution. A bitmap-
less space in which to be based image is like a mosaic of
stored pixels with each pixel holding a
→ Usually contain well defined specific colour.
curves and shapes
• Disadvantages: • Disadvantages:
→ cannot be used for photo- → Not easily scalable because
realistic images because these each image is mapped onto a
images do not tend to contain non-flexible grid . Enlarging
well defined lines. the image would disrupt the
File names for vector-based images usually grid causing lines to become
consist of extensions such as *.EPS, blurry.
*.AI, *CDR, or *.DWG. → Require more computer
memory for file storage
(compared to vector based
images)
File names for bitmap-based images
usually consist of extensions such
as *.PSD, *.JPG, *GIF, *.TIF, or
*.BMP.

5
Prepared by : Haval Akrawi (MS.c) 2016-2017
Bit depth

If we go back to our previous example of a line represented by a raster image

16 * 12 pixels

As the image is just black and white - no colors, no greys - it could be

represented by 0s and 1s:

6
Prepared by : Haval Akrawi (MS.c) 2016-2017

A bit is a binary digit, which can only have a value of 0 or 1. This is a 1 bit digital
representation of the image. That is, the color of each pixel can be stored in just
1 bit of space in the computer.

However, images will normally need more colors than that, so the definition of
the color of each pixel will take up more space in the file. 256 color values can be
fitted into 8 bits, 16 million colors need 24 bits.

Bit depth defines the number of colors available to each pixel

within an image.

Bit Depth Colors Available

1-bit black and white

2-bit 4 colors

4-bit 16 colors

8-bit 256 colors

8-bit greyscale 256 shades of grey

16-bit 32768 colors

24-bit 16.7 million colors

32-bit 16.7 million + 256 Levels of transparency

7
Prepared by : Haval Akrawi (MS.c) 2016-2017

8-bit image - 256 colors

With an 8-bit image, each pixel can be
one of 256 colors.
This is a color table, not the image itself.
It shows the choice of 256 colors
available to each pixel.
If the colors are numbered from 0
starting at the top left hand corner of the
square, then one pixel in the image
might be color 5, which is yellow. The
next pixel might be color 6 which is a
pale lilac.

Numbers less than 256 fit in 8 bits

24-bit image - 16 million colors

With a 24 bit image, you have

16 million colors, made up from
256 shades of red, 256 shades
of green and 256 shades of blue.

All the colors are made up from

varying amounts of these
primary colors, so for example,
0,0,0 would be black and
255,255,255 would be white.
255,0,0 is red. 0,255,0 is green
and 0,0,255 is blue.
255,255,0 makes yellow,
255,0,255 makes magenta and
0,255,255 makes cyan.

Each value of 0 - 255 takes up 8

bits, so the total amount of
space to define the color of each
pixel is 24 bits. 8

Bit = binary digit

Prepared by : Haval Akrawi (MS.c) 2016-2017

An example

24 bit bmp 8 bit bmp

240 * 180 = 43200 pixels 240 * 180 = 43200 pixels
File size: File size:
43200 *3 = 129600 bytes = 127 KB 43200 *1 = 43200 bytes = 42 KB
Actual size 127 KB Actual size 44 KB

4 bit bmp Gif

240 * 180 = 43200 pixels 240 * 180 = 43200 pixels
File size: File size:
43200 *0.5 = 21600 bytes = 21 KB Compressed format
Actual size 22 KB Actual size 3 KB

File size decreased from 127 KB to 3 KB

No visible difference.
Greyscale and RGB
A greyscale digital image is an image in which
the value of each pixel is a single sample, in which it
carries only intensity information. Images of this sort,
also known as black-and-white, are composed in
various shades of grey, varying from black which is the
weakest intensity to white which is the strongest
intensity. Also grayscale images have many shades of
grey in between.
9
Prepared by : Haval Akrawi (MS.c) 2016-2017

Monochrome 256

Monochrome describes paintings, drawings and photographs in one colour or in

shades of one colour. A monochromatic object or image has colours in shades of
limited colours or hues. Also monochrome 256 is kind of like grey scale accept
monochrome has 256 different shades of grey, black and white.
High Color and True Color

High colour graphics is a method of storing image information in a computer's

memory and that each pixel is represented by two bytes. Usually the colour is
represented by all 16 bits, but some devices also support 15-bit high colour.
True colour is a method of representing and storing graphical image
information in an RGB colour space which a very large number of colours, shades,
and hues can be displayed in an image, such as in high quality photographic images
or complex graphics. Usually, true colour is defined to mean at least 256 shades of
red, green, and blue, for a total of at least 16,777,216 colour variations, which can be
used in various images and videos.

10
Prepared by : Haval Akrawi (MS.c) 2016-2017
File formats

There are very many file formats, so I'll only describe a few of the more common
ones.

For the Web, stick to gifs and jpegs

Older versions of Microsoft Office products (Word, Excel, Power point) were quite
fussy about what graphics files they would import, but current versions will take
almost anything. However, you are usually safe with tiffs and picts

bmp

 Windows based PC bitmap format.

 1 to 24 bit color formats
 4 and 8 bit images compressed using lossless
compression
 24 bit images not compressed

Gif - Graphics Interchange Format

 1 or 8 bit bitmap, greyscale or indexed color images

developed for use with Macs and PCs use on web pages
- compressed, so small, allow for fast downloads
 support animations, interlacing, and transparent colors
 also used frequently with presentation software
 best used for clip art/cartoon style graphics

png - Portable (Public) Network Graphic

 alternative to gifs
 use on web pages, but not universally supported yet
 24 bit color
 lossless compression

11
Prepared by : Haval Akrawi (MS.c) 2016-2017

jpg or jpeg - Joint Photographic Experts Group

 24 bit color images

 used for web and presentation graphics
 compressed
 good image quality at small file sizes
 good for photographic type images
 lossy compression can result in poor image quality if
compressed too much

tif or tiff - Tagged Image File Format

 good for exchange of images between programs and

platforms
 generally uncompressed, or uses lossless compression
 1 bit color to 24 bit color
 multiple types of tiffs, some incompatible with others

pict

 proprietary to MACs
 format similar to tiffs, allowing for file transfer between
programs
 compressed
 support 16 to 32 bit color
 can be used for vector and bitmap images

psd

Adobe PhotoShop file format

eps

Encapsulated Post Script

pdf

Portable Document Format Adobe Acrobat

wmf

Windows Meta File

12
Prepared by : Haval Akrawi (MS.c) 2016-2017
Resolution

Resolution may be thought of in terms of

DPI dots per inch

PPI pixels per inch

The higher the DPI or PPI, the more dots that are in an inch and generally, the
better the image quality and the larger the file size.

The most important elements of resolution are

Screen resolution and Printer resolution

Screen Resolution

Consider an image of 320*240 pixels

If the monitor is set to a resolution of 640 * 480, the image will take up a quarter
of the screen.
If the monitor is set to a resolution of 1280 * 1024, the image will appear
smaller.

The PCs in the PC suite are set up so that you should not be able to alter the
screen resolution, but they do sometimes get changed. When set to a high

13
Prepared by : Haval Akrawi (MS.c) 2016-2017

resolution, text appears very small and you can fit quite a lot on the screen at
once. For lower resolutions, text is larger and buttons are larger.

If you take a screen of 12 inches by 9 inches, the screen resolutions equate to

the following DPIs:

Screen Resolution DPI

640 x 480 53.33

800 x 600 66.67

1024 x 768 85.33

1152 x 864 96

1280 x 1024 106.67

Don't make the image bigger than the screen

Especially when designing web pages, consider the screens people may be using
to view your pages. If you design a page on a big screen, and it looks great,
remember to try it out on a 15 inch monitor. If people have to scroll down for
some vital part, they may not ever see that information.

14
Prepared by : Haval Akrawi (MS.c) 2016-2017

Also, if people have to wait ages for a huge image to download, they may give up
and go to another page.

Printer resolution

The advertised resolution for a Deskjet 1220C is 600dpi (though they claim
2400x1200dpi with HP Photoret III Precision Technology)

The advertised resolution for a Laserjet 4500DN is 600dpi (though they claim
2400dpi with HP ImageREt 2400)

The advertised resolution for an Epson Stylus Color 900 is 1440dpi

Do not be misled by this.

If you took the Epson figure literally and tried to print an image of 1440 ppi . . . .

That is 14400 *11520 = 165,888,000 pixels

and the file size would be that number of pixels multiplied by the bit depth - for a
24 bit image, about 500 MB.

If you tried to print an image of 1440 ppi . . . .

15
Prepared by : Haval Akrawi (MS.c) 2016-2017
1. No machine in this department can handle an image
that enormous
2. The printer would throw most of it away

Printer dpi is NOT equal to pixels per inch

That is because each pixel is made up from dots of black, cyan, magenta and
yellow

For an image of pure black and white - that's no colors and no greys - then a 600
dpi printer could print a 600 ppi image exactly, without throwing any pixels away.

For color or greyscale images, then the impression of each color is given by dots
of the different inks and it may take four dots for each pixel.

Image resolution should be 1/4 to 1/2 printer resolution

For a 600 dpi printer there is no point in sending an image of resolution greater
than 150 ppi

If half or three quarters of your image is going to be thrown away, it is better

that you choose how that's going to happen rather than letting the printer throw
away random pixels.

16
Prepared by : Haval Akrawi (MS.c) 2016-2017
Compression
Compression - the process of compacting an image by
removing redundant information.

If I take a photo for the mugshot board, it's probably just a head and shoulders
against a white background. For that white background, it's a waste of filespace
to hold 8 or 24 bits of information for each pixel, all with the value for white. It
would be much more efficient to say that the next 285 pixels (or whatever) are all
white.

There are two main types of compression:

Lossless compression - on decompression, the original is restored in every

detail.

Lossy compression – unnecessary (?) detail is thrown away

Compression

Uncompressed

Consider a row of pixels, some of color 5 and some of color 6

5 5 5 6 5 5 6 6 6 6 5 5 5 5

Lossless compression

For lossless compression I could say I have 3 pixels of color 5 and then 1 of color
6 and then 2 of color 5 etc
5(3),6,5(2),6(4),5(4)
This could be expanded back to what we started with.

17
Prepared by : Haval Akrawi (MS.c) 2016-2017

Lossy compression

To compress the image further, I could say that color 6 is very nearly the same
as color 5, so why don't we just say we have 14 pixels of color 5
5(14)
Information is then lost and this could not be expanded back to what we started
with.

tiff is an uncompressed format

gifs use lossless compression

jpgs use lossy compression

18